刪除類（如果存在）並使用jquery添加新類

Question

我有一個<ul>的標記如下：

<ul>       
  <li class=""><a href="">Insulated And Extruded</a></li>
  <li class=""><a href="">Grille Type Rolling</a></li>
  <li class="active2"><a href="">PVC High Speed Doors</a></li>
  <li class=""><a href="">Swinging doors</a></li>
</ul> 

在這里，我想檢查li有一個名為active2的類，如果有，那么我需要刪除該類，並需要為該li添加不同的類。

這是我在jQuery中嘗試的方式：

if($('ul li').hasClass('active2')) {
  $(this).removeClass('active2').addClass('active1'); 
}

但它不起作用。

任何人都可以幫我解決這個問題嗎？

Answer 1

要使用hasClass()您需要循環遍歷所有li元素並單獨檢查它們。

但是這里根本不需要hasClass() ，因為你可以直接選擇.active2元素並在它們上調用toggleClass() ，如下所示：

 $('ul li.active2').toggleClass('active2 active1'); 

 .active1 { background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class=""><a href="">Insulated And Extruded</a></li> <li class=""><a href="">Grille Type Rolling</a></li> <li class="active2"><a href="">PVC High Speed Doors</a></li> <li class=""><a href="">Swinging doors</a></li> </ul> 

Answer 2

你不需要hasClass() ，你可以這樣做：

 $('ul li.active2').removeClass('active2').addClass('active1'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class=""><a href="">Insulated And Extruded</a></li> <li class=""><a href="">Grille Type Rolling</a></li> <li class="active2"><a href="">PVC High Speed Doors</a></li> <li class=""><a href="">Swinging doors</a></li> </ul>