使用javascript单击多个div时添加和删除类

Question

我实际上试图在单击时将类（选定）添加到标签并从邻居标签中删除类。

问题是当有 2 个 div 时它不起作用，下面的代码仅适用于第一个 Div 或当我单击第二个标签的标签时，第一个活动标签被删除

 const menuLis = document.querySelectorAll(".top-nav > label"); for (let label of menuLis) { label.addEventListener("click", function(){ // 1. Remove Class from All Lis for (let label of menuLis) { label.classList.remove('selected'); } // 2. Add Class to Relevant Li this.classList.add('selected'); }); }

 .selected{color:red}

 <div class="grid-item"> <section> <div class='top-nav'> <label>Coffee</label> <label>Tea</label> <label>Milk</label> </div> </section> </div> <br><br> <div class="grid-item"> <section> <div class='top-nav'> <label>Coffee</label> <label>Tea</label> <label>Milk</label> </div> </section> </div>

谢谢

Answer 1

您正在从menuLis所有项目中menuLis 。 您应该获得当前.top-nav部分中仅包含标签的列表，并从中删除类。

 const menuLis = document.querySelectorAll(".top-nav > label"); for (let label of menuLis) { label.addEventListener("click", function(){ let container = this.closest('.top-nav'); let curMenuLis = container.querySelectorAll("label"); // 1. Remove Class from All Lis for (let label of curMenuLis) { label.classList.remove('selected'); } // 2. Add Class to Relevant Li this.classList.add('selected'); }); }

 .selected{color:red}

 <div class="grid-item"> <section> <div class='top-nav'> <label>Coffee</label> <label>Tea</label> <label>Milk</label> </div> </section> </div> <br><br> <div class="grid-item"> <section> <div class='top-nav'> <label>Coffee</label> <label>Tea</label> <label>Milk</label> </div> </section> </div>