如何使用 javascript 添加元素 class？

Question

我需要你的幫助：這是某種照片庫。）當我單擊它時，我想在面板上添加 this.active class？ 誰能教我如何使用傳統功能做到這一點：它只適用於一個元素:(

 var panels = document.querySelectorAll(".panel"); console.log(panels); for (var i = 0; i < panels.length; i++) { panels[i].addEventListener("click", function() { var panelClassName = this.className; addClass(panelClassName); }); } function addClass(currentPanel) { var activePanel = document.querySelector("." + currentPanel); activePanel.classList.add("active"); }

 <div class="container"> <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2017/02/01/22/02/mountain-landscape-2031539_1280.jpg)"> <h3>Explore the world</h3> </div> <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2016/11/14/04/45/elephant-1822636_1280.jpg)"> <h3>Elephant</h3> </div> <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_1280.jpg)"> <h3>Lake</h3> </div> <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg)"> <h3>Jungle</h3> </div> <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_1280.jpg)"> <h3>Forest</h3> </div> </div>

Answer 1

主要方法是在將此 class 添加到點擊事件目標之前，使用 function 將active class 刪除到所有活動面板。 您可以在此處查看代碼：

https://jsfiddle.net/p8sr453o/6/

 function removeActiveClass() { const div = document.querySelector('.panel.active'); div && div.classList.remove('active'); } function addActiveClass(target) { target.classList.add("active"); } function addClass(event) { removeActiveClass(); addActiveClass(event.currentTarget); } var panels = document.querySelectorAll(".panel"); console.log(panels); for (var panel of panels) { panel.addEventListener("click", addClass); }

 .panel { color: lightblue; }.panel.active { color: red; }

 <div class="container"> <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2017/02/01/22/02/mountain-landscape-2031539_1280.jpg)"> <h3>Explore the world</h3> </div> <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2016/11/14/04/45/elephant-1822636_1280.jpg)"> <h3>Elephant</h3> </div> <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_1280.jpg)"> <h3>Lake</h3> </div> <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg)"> <h3>Jungle</h3> </div> <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_1280.jpg)"> <h3>Forest</h3> </div> </div>