Question

$(document).ready(function(){
   $('.fa').hide();
   $('.icon').click (function(){
     $('.icon').addClass('active');
     if($(".fa").css("display") == "none") {
       $(".fa").show();
     }
     if $('.icon').click && $('.icon').hasCalss('active') (function(){
       $(".fa").hide();
     });
   });
});

我想要它，以便当您单击div（在本例中为“ .icon”）时，显示div .fa，但是当我再次单击它并显示.fa时，它将隐藏.fa 在控制台中，它会不断提出这两个错误

未捕获的SyntaxError：意外的标识符SyntaxError：意外的标识符

但是我不知道出什么问题了，因为我对jQuery和Java脚本还很陌生。帮助将不胜感激。谢谢:)

Answer 1

您需要使用toogle功能：

$(document).ready(function(){
   $('.fa').hide();
   $('.icon').click (function(){
     $('.icon').addClass('active');
     $(".fa").toogle();
   });
});

https://www.w3schools.com/jquery/eff_toggle.asp

Answer 2

如果只是要在单击时切换类，则可以使用.toggleClass()方法： Link to toggleClass() on http://api.jquery.com。只需使用CSS类来操作状态即可。

$(document).ready(function(){

  const icon =  $('.icon');
   
  icon.click(function() {
    $(this).toggleClass("active");
  });

   
 });

.container {
  border: 1px solid grey;
  padding: 0.5em;
  text-align: center;
}

.icon {
  opacity: 0.5;
  font-size: 48px;
  color: #ddd;
  transition: all 300ms linear;
  cursor: pointer;
}

.icon.active {
  opacity: 1;
  color: #bada55;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet"/>

<section class="container">

  <span class="icon active">
    <i class="fas fa-stroopwafel"></i>
  </span>
  
  <span class="icon">
    <i class="fas fa-balance-scale"></i>
  </span>
  
</section>

jQuery我做错了什么？

2 个答案: