簡單的高亮顯示一次只能顯示一個元素功能

我有一個選擇（用於高亮顯示）的類，我一次只能添加一個元素，所以每次點擊一個新元素時，它都會將選中的類添加到該元素中並從任何以前點擊的元素中移除選定的類 - 無論是哪個。簡單的高亮顯示一次只能顯示一個元素功能

如果直接點擊下一個/上一個元素（按鈕），我只能使它工作。

如果我點擊按鈕1，然後例如按鈕4，那麼它只是不斷添加類。

var myButtons = document.querySelectorAll('.my-button'); 

for (var i = 0; i < myButtons.length; i++) { 

    var button = myButtons[i]; 

    button.addEventListener('click', function(event) { 

    this.classList.toggle("selected"); 
    this.previousElementSibling.classList.remove("selected"); 
    this.nextElementSibling.classList.remove("selected"); 

}); 

}

我知道爲什麼上面不行，我直接告訴它只是地址下一個/上，但是我一直在使用的if/else班級列表包含試過了，！這一點。 classList.contains，e.currentTarget的各種組合，但我不能讓它工作。

我想我在尋找類似：

如果（任何myButtons.classList.contains（「選擇」））
刪除選定
其他
添加選定

我花了幾個小時尋找一個香草JS解決方案，但我只能找到jQuery - 我想學習純JavaScript。

有人可以給我一些指針嗎？將不勝感激！

來源

2016-06-10 Capax

哇，我得到了一些偉大的答案了，我希望我能知道如何判斷哪一個是「最好的」。 – Capax

@DavidWickström解決方案不是我認爲最好的。 –

你會發現這裏是處理該問題的另一種方式。首先，內部forEach循環負責從所有按鈕中刪除「selected」類，然後將該類添加到單擊的按鈕中。

Array.prototype.forEach.call(buttons, function(b) { 
    b.addEventListener('click', function(e) { 
    Array.prototype.forEach.call(buttons, function(b) { 
     b.classList.remove('selected') 
    }) 
    b.classList.toggle('selected') 
    }) 
})

來源

2016-06-10 08:33:28

謝謝，哇有很多方法來解決這個問題似乎，我需要深入瞭解forEach.call – Capax

你是受歡迎的。使用forEach而不是常規的for-loop只是一個偏好問題。我的建議的主要觀點是，在將其應用到單擊的按鈕之前，您會觸發一個首先刪除所有類的循環。 –

我喜歡這種方法，並且我學到了一些新的東西，謝謝你！ – Capax

我修改了一下你的代碼。這裏的更新https://jsfiddle.net/giuseppe_straziota/s6s0yb2k/

我已經插入此cicle

for (var i = 0; i < myButtons.length; i++) { 
         var button2 = myButtons[i]; 
       button2.classList.remove("selected"); 
     }

來源

2016-06-10 08:21:34

另一個偉大的，謝謝！這個特殊的屬於嵌套循環類別，對吧？我試圖從我得到的不同解決方案中學習:-) – Capax

是的。雖然，這不是更優雅:) –

那麼你可以使用

document.querySelectorAll(".selected")

(function() { 
 

 
    var myButtons = document.querySelectorAll('.my-button'); 
 

 
    for (var i = 0; i < myButtons.length; i++) { 
 

 
    var button = myButtons[i]; 
 

 
    button.addEventListener('click', function(event) { 
 
     var x = document.querySelectorAll(".selected"); 
 
     if(x.length) { 
 
     \t x[0].classList.remove('selected'); 
 
     } 
 
     this.classList.toggle("selected"); 
 
     
 

 
    }); 
 
    } 
 
})();

.selected { 
 
    background: darkred; 
 
}

<html> 
 

 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Document</title> 
 
</head> 
 

 
<body> 
 

 

 
    <div class="my-button">Button 1</div> 
 

 
    <div class="my-button">Button 2</div> 
 

 

 
    <div class="my-button">Button 3</div> 
 
    <div class="my-button">Button 4</div> 
 

 
    <div class="my-button">Button 5</div> 
 
    <div class="my-button">Button 6</div> 
 

 

 
</body> 
 

 
</html>

來源

2016-06-10 08:35:43 XeNo13GrIn

非常感謝，這很有趣，你稱這種類型的循環是什麼？我認爲這是一個嵌套的循環，但不知道（我渴望學習）。 – Capax

這一個不使用循環。它只是改變了'選擇'類的第一個元素。 x [0] .classList.remove（'selected'）; – XeNo13GrIn

簡單的高亮顯示一次只能顯示一個元素功能

回答

相關問題