如何使用 vanilla JavaScript 在 Ul li 上設置和刪除類？

Question

我有兩個 ul 具有相同的類，我試圖實現的概念是單擊活動 li 時應該更改邊框顏色。 我已經成功了，我需要的概念是我希望在第一個 ul li 上顯示默認的相同邊框顏色，如果我點擊其他，它應該被刪除，並且顏色應該應用於點擊的一個。 到目前為止我嘗試過的代碼。

任何幫助將不勝感激 ！！

 var x = document.querySelectorAll('.random-value li'); for (var i = 0; i < x.length; i++) { x[i].addEventListener("click", function() { var selectedEl = document.querySelector(".selected"); if (selectedEl) { selectedEl.classList.remove("selected"); } this.classList.add("selected"); }, false); };

 .random-value li{ margin: 0 0 15px 0; border: 1px solid green; padding: 15px 26px; } .random-value .selected{ border: 1px solid red; }

 <ul id="first" class="random-value"> <li>200 </li> <li>2010 </li> <li>2100 </li> <li>2030 </li> </ul>

Answer 1

我想這就是你要找的

 //Making first option as Highlighted document.querySelectorAll('.random-value li')[0].classList.add("selected"); var x = document.querySelectorAll('.random-value li'); for (var i = 0; i < x.length; i++) { x[i].addEventListener("click", function() { var selectedEl = document.querySelector(".selected"); if (selectedEl) { selectedEl.classList.remove("selected"); } this.classList.add("selected"); }, false); };

 .random-value li{ margin: 0 0 15px 0; border: 1px solid green; padding: 15px 26px; } .random-value .selected{ border: 1px solid red; }

 <ul id="first" class="random-value"> <li>200 </li> <li>2010 </li> <li>2100 </li> <li>2030 </li> </ul>