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

I want it so that when you click on a div(in this case '.icon') The div .fa shows but when I click on it again and .fa is showing it hides .fa In the console it keeps on coming up with these 2 errors

Uncaught SyntaxError: Unexpected identifier SyntaxError: Unexpected identifier

but I don't know whats wrong as i'm quite new to jquery and java-script. Help would be appreciated. Thank you :)

Answer 1

You need to use toogle function :

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

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

Answer 2

If it is just about switching classes on click you can use the .toggleClass() -method: Link to toggleClass() on http://api.jquery.com . Just use your CSS-Class to manipulate the state.

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