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

我试图在点击时切换圆圈，这样圆圈复选框就会出现，圆圈就会隐藏，但到目前为止还没有找到答案。我已经有了CSS中的悬停部分，其中圆圈消失，复选标记出现

HTML

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");
});

---

假设您使用的是令人敬畏的字体，并且只是尝试在单击时更改复选图标的样式，那么这两个元素都不需要。相反，使用一个，通过给它一个特定的选择器来切换它的类。像下面这样

$（'.check'）。在（'click'，function（）上{
$（this）.find（“#toggle me”）.toggleClass（'fa-circle fa check circle'）；
});


要获得预期的结果，请使用切换而不是切换类

使用隐藏id为的图标

$（“#u”）.hide（）

切换id为-i和u的图标
$（“.check”）。单击（函数（）{
$（“#u”）.toggle（）；
$（“#i”）.toggle（）；
});

工作代码示例供参考-

代码笔-
$（“#u”）.hide（）；
$（“.check”）。单击（函数（）{
$（“#u”）.toggle（）；
$（“#i”）.toggle（）；
});
#i{
颜色：#2ECC71；
背景色：白色；
}
#u{
颜色：#2ECC71；
背景色：白色；
}


记得我吗
我不明白你想做什么。你有一个“圈”和一个“检查圈”。现在要切换什么？你是不是每次点击你的链接都想显示一个而隐藏另一个？如果我希望五分钟前看到这个，因为这就是我做的，而你的更简单。$（'u'）。hide（）$（“.check”）。单击（function（）{if（$（“#u”）.css（“display”）==“none”）{$（“#u”）.css（“display”，“inline block”）；$（“#i”）.css（“display”，“none”）；}其他{$（“#u”）.css（“display”，“none”）；$（“#i”）.css（“display”，“inline block”）}）；初始的toggleClass（）似乎是避免冗余的更合适的方法，因为id的“i”和“u”看起来是添加相同的样式，并且期望的效果是在单击时简单地显示或隐藏复选标记。
#i {
  color: #2ECC71;
  background-color: white;
}
#u {
  color: #2ECC71;
  background-color: white;
}
/*
.check:hover #i,
.check #u {
  display: none;
}
.check:hover #u {
  display: inline;
}
*/

/*
$(".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");
});