-1

Here you can see the when I click on the icon it doesn't change. How to change it

$(document).ready(function(){
         $('.fa fa-bars').click(function(){
            $(this).toggleClass('fa fa-times');
         });
      });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<script src="java.js"></script>
 <script src="https://use.fontawesome.com/16ca663e5d.js"></script>
</head>
<body>
   <header >
      <nav >
         <ul >
            <li>
               <a >Home</a>
            </li>
            <li >
               <a>Gallery</a>
            </li>
            <li >
               <a >Contact</a>
            </li>
            <li>
               <a >Sign in</a>
            </li>
         </ul>
      </nav>
      <i class="fa fa-bars ham" aria-hidden="true"></i>

      
   </header>
   <section id="home" class="container-fluid">

   </section>
   <script>
      $(document).ready(function(){
         $('.fa fa-bars').click(function(){
            $(this).toggleClass('fa fa-times');
         });
      });
   </script>
</body>
</html>
shawaiz minhas
  • 116
  • 11

2 Answers2

0

As I mentioned in the comment, you have to change $('.fa fa-bars') to $('.fa.fa-bars') and then your toggleClass should look like .toggleClass('fa-bars fa-times')

$(document).ready(function() {
  $('.fa.fa-bars').click(function() {
    $(this).toggleClass('fa-bars fa-times');
  });
});

Problem is that $('.fa fa-bars') means that you are looking for an element with the class fa and you are looking for a child of that element of the type fa-bars, if that existed it would look like <fa-bars></fa-bars>

Demo

$(document).ready(function() {
  $('.fa.fa-bars').click(function() {
    $(this).toggleClass('fa-bars fa-times');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <script src="java.js"></script>
  <script src="https://use.fontawesome.com/16ca663e5d.js"></script>
</head>

<body>
  <header>
    <nav>
      <ul>
        <li>
          <a>Home</a>
        </li>
        <li>
          <a>Gallery</a>
        </li>
        <li>
          <a>Contact</a>
        </li>
        <li>
          <a>Sign in</a>
        </li>
      </ul>
    </nav>
    <i class="fa fa-bars ham" aria-hidden="true"></i>


  </header>
  <section id="home" class="container-fluid">

  </section>
  <script>
    $(document).ready(function() {
      $('.fa fa-bars').click(function() {
        $(this).toggleClass('fa fa-times');
      });
    });
  </script>
</body>

</html>
Carsten Løvbo Andersen
  • 26,637
  • 10
  • 47
  • 77
  • Youtube can be very good, but sometimes the technology can be old or the video can contain errors. – Carsten Løvbo Andersen Oct 28 '21 at 10:37
  • 1
    Or hard to see the exact code due to youtube compression (eg a missing ".") – freedomn-m Oct 28 '21 at 10:38
  • As @freedomn-m says, The reason why you got a downvote could be because of this statement `I did some changes to your code`, It can be very hard for people to understand what you changed and why, so it will be hard to learn from it. – Carsten Løvbo Andersen Oct 28 '21 at 10:41
  • @CarstenLøvboAndersen I answer by assuming that person who ask question is not blind he can see that what's the wrong. – Neeraj Oct 28 '21 at 10:43
  • @Neeraj comparing code character-by-character is tedious, not blindness. For future reference, have a read of [what comment should I add to code only answers](https://meta.stackoverflow.com/questions/300837/what-comment-should-i-add-to-code-only-answers) (which yours essentially is) – freedomn-m Oct 28 '21 at 10:46
  • @Neeraj Please understand I didn't downvote you. I'm not saying your answer is wrong, but I'm saying that I tried to teach the OP what he did wrong, maybe that is what got you downvoted. – Carsten Løvbo Andersen Oct 28 '21 at 10:49
-1

I did some changes to your code now it's working. you must follow this link toggle class concept to properly understand toggle class how to work.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
$(document).ready(function () {
  $(".fa-bars").click(function(e){
  
    $(this).toggleClass("fa-bars fa-times"); //you can list several class names 
   
  });
});
</script>
</head>
<body>
 
<i class="fa fa-bars"></i>
 
 
</body>
</html>
Neeraj
  • 749
  • 6
  • 15