javascript - Jquery 我做错了什么？

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 在控制台中它不断出现这2个错误

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

但我不知道出了什么问题，因为我对 jquery 和 java-script 很陌生。帮助将不胜感激。谢谢 ：）

Answer 1

您需要使用工具功能：

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

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

Answer 2

如果只是在点击时切换类，您可以使用.toggleClass()-method: Link to toggleClass() on http://api.jquery.com。只需使用您的 CSS-Class 来操作状态。

$(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>