圖示在javaScript點擊時不會改變-有解無憂

在這里你可以看到當我點擊圖示時它沒有改變。如何改變它

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

uj5u.com熱心網友回復：

正如我在評論中提到的，您必須更改$('.fa fa-bars')為$('.fa.fa-bars')，然后您的 toggleClass 應該看起來像.toggleClass('fa-bars fa-times')

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

問題是這$('.fa fa-bars')意味著您正在尋找具有該類的元素，fa并且正在尋找該型別元素的子元素fa-bars，如果存在，它看起來像<fa-bars></fa-bars>

演示

顯示代碼片段

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

uj5u.com熱心網友回復：

我對您的代碼進行了一些更改，現在它可以作業了。您必須遵循此鏈接切換類概念才能正確理解切換類的作業原理。

<!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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/339747.html

標籤：javascript html 查询 css

上一篇：如何將VBA宏轉換為C#以在Windows表單應用程式中使用？

下一篇：JS如何通過ID切換類