jquery - 如何切换显示以显示在 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

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

1. 使用id隐藏图标

   $("#u").hide();

2. 使用 id -i 和 u 切换图标 $(".check").click(函数(){ $("#u").切换(); $("#i").切换(); });

供引用的工作代码示例-
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>