如何切换显示以显示在 if-else 语句中？

Question

我试图在点击时切换圆圈，这样圆圈检查就会出现，圆圈就会隐藏，到目前为止还没有弄清楚。我已经在 CSS 中有了悬停部分，其中圆圈消失了，勾号出现了。

HTML

<p class="reme">
  <a href="#" class="check">
    <i id="i" class="far fa-circle"></i>
    <i id="u" class="fas fa-check-circle"></i>
    . 
  </a>
  &nbsp;&nbsp;&nbsp;Remember Me
</p>

CSS

#i {
  color: #2ECC71;
  background-color: white;
}
#u {
  color: #2ECC71;
  background-color: white;
}
/*
.check:hover #i,
.check #u {
  display: none;
}
.check:hover #u {
  display: inline;
}
*/

JQUERY

/*
$(".check").click(function(){
  if ( $(".check").hasClass("fa-circle")  {
    $(".check").removeClass("fa-circle");
  } else {
    $(".check").toggleClass("fa-check-circle fa-circle");
  }
});

$(".check").click(function() {
  if ( $( this ).find('i').hasClass( "fa-circle" ) ) {
    $( this ).find('i').removeClass( "fa-circle" );
    $( this ).find('i').addClass( "fa-circle-check" );
  } else {
    $( this ).find('i').removeClass( "fa-circle-check" );
    $( this ).find('i').addClass( "fa-circle" );
  }
});
*/
$(".check").click(function(){
  $(".check").toggleClass("fa-circle fa-circle-check");
});
$(".check").click(function(){
  $(".check").show("fa-circle-check");
});
$(".check").hasClass(function(){
  $(".check").hide("fa-circle-check");
});

Answer 1

假设您使用的是 font-awesome 并且只是尝试在单击时更改复选图标的样式，则不需要这两个元素。相反，使用一个并通过给它一个特定的选择器来切换它的 class 。像下面这样的东西。

$('.check').on('click',function(){
  $(this).find('#toggle-me').toggleClass('fa-circle fa-check-circle');
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="reme">
  <a href="#" class="check">
    <i id="toggle-me" class="far fa-circle"></i>
  </a>
</p>

Answer 2

要达到预期结果，请使用 toggle 而不是 toggleClass

使用
隐藏带有 id 的图标
$("#u").hide();
使用 id -i 和 u 切换图标 $(".check").click(function(){ $("#u").toggle(); $("#i").toggle(); });

供参考的工作代码示例-
codepen - https://codepen.io/nagasai/pen/VojwbJ

$("#u").hide();
$(".check").click(function(){
  $("#u").toggle();
  $("#i").toggle();
});

#i {
  color: #2ECC71;
  background-color: white;
}
#u {
  color: #2ECC71;
  background-color: white;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="reme">
  <a href="#" class="check">
    <i id="i" class="far fa-circle"></i>
    <i id="u" class="far fa-check-circle"></i>
    . 
  </a>
  &nbsp;&nbsp;&nbsp;Remember Me
</p>

如何切换显示以显示在 if-else 语句中？

How do I toggle the display to show in an if-else statement?

html

css

jquery

font-awesome