從javascript中的幾個元素中刪除相同的類

Question

我有4個按鈕，其中class是active ，現在我想刪除所有這些class，然后僅將1 class添加到我單擊的那個class中。

<button class="active btn">btn1</button>
<button class="active btn">btn2</button>
<button class="active btn">btn3</button>
<button class="active btn">btn4</button>

這是我到目前為止編寫的代碼：

let buttonOptions = document.querySelectorAll(".btn");
for (let i=0; i< buttonOptions.length; i++) {
    buttonOptions.addEventListener('click', function() {
        buttonOptions[i].classList.add("active");
    });   
}

但我不知道該如何刪除這些active班級。 而且我想知道有一種方法，以避免使用for專門用於去除類？

Answer 1

您可以避免使用for循環，但是您仍然必須進行迭代，因此實際上沒有任何意義。 我將使用forEach因為它在querySelector上受支持，並且看起來更干凈一些，但是for循環也很好

綁定事件處理程序同樣如此，您必須迭代並定位每個元素

 let buttonOptions = document.querySelectorAll(".btn"); buttonOptions.forEach( el => el.addEventListener('click', function() { buttonOptions.forEach( els => els.classList.remove('active') ) this.classList.add("active"); }) ) 

 .active {color : red} 

 <button class="active btn">btn1</button> <button class="btn">btn2</button> <button class="btn">btn3</button> <button class="btn">btn4</button> 

Answer 2

 var buttons = document.getElementsByClassName("btn"); function removeAllActive() { [].forEach.call(buttons, function(el) { el.classList.remove("active"); }); } removeAllActive(); [].forEach.call(buttons, function(el) { el.addEventListener("click", function() { removeAllActive(); el.classList.add("active"); }); }); 

 .active { background-color: red; } 

 <button class="active btn">btn1</button> <button class="active btn">btn2</button> <button class="active btn">btn3</button> <button class="active btn">btn4</button> 

Answer 3

 document.getElementById('buttons').addEventListener('click', function(evt) { if (evt.target.classList.contains('btn')) { Array.from(document.querySelectorAll('.btn', this)).forEach(x => { x.classList.toggle('active', x == evt.target) }); } }); 

 .active { color: red; } 

 <div id="buttons"> <button class="active btn">btn1</button> <button class="btn">btn2</button> <button class="btn">btn3</button> <button class="btn">btn4</button> </div> 

將偵聽器附加到每個按鈕上很浪費。 我將偵聽器附加到一個包含元素，然后等待事件冒泡。 如果單擊來自btn分類的元素之一，那么我會在其中找到所有btn分類的元素，並根據是否是單擊按鈕來切換其active類。

Answer 4

這是解決上述問題的最簡單方法，

$(function){
   $(document).on("click",".btn",function(){
      $(".btn").removeClass("active");
      $(this).addClass("active");
   });
});

Answer 5

如果您被允許使用jquery，它將對您來說更加容易。 請看下面的代碼，它可能對您有幫助

 <script> $( document ).ready(function() { $('.btn').removeClass('active'); $('.btn').click(function(e) { $('.btn').removeClass('active'); $(this).addClass('active'); }); }); </script> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <button class="active btn">btn1</button> <button class="active btn">btn2</button> <button class="active btn">btn3</button> <button class="active btn">btn4</button> 

Answer 6

試試這個：

$(document).on("click",".btn",function(){
   $(".btn").removeClass("active");
   $(this).addClass("active");
});