如何在多个“ul”元素上的特定“li”上添加活动类

Question

我有三个菜单项，并且希望在单击时添加组（ul）中特定li的活动类。

我已经设法做了一个，但我正在努力让它为每个人工作。

小提琴： https ： //jsfiddle.net/qx89dt0s/

JavaScript的

var selector, elems, makeActive;

selector = '.nav li';

elems = document.querySelectorAll(selector);

makeActive = function () {
    for (var i = 0; i < elems.length; i++)
        elems[i].classList.remove('active');

    this.classList.add('active');
};

for (var i = 0; i < elems.length; i++)
    elems[i].addEventListener('mousedown', makeActive);

提前致谢。

Answer 1

您需要迭代每个.nav并执行与之前针对每个.nav的li相同的操作。

 // get all .nav  and convert into array, for latest
// browser use Array.from method
[].slice.call(document.querySelectorAll('.nav'))
// iterate over .nav elements
.forEach(function(ele) {
  // get all li within it
  var elems = ele.querySelectorAll('li');

  // define the function for updating
  var makeActive = function() {
    for (var i = 0; i < elems.length; i++)
      elems[i].classList.remove('active');
    this.classList.add('active');
  };

  // bind listener
  for (var i = 0; i < elems.length; i++)
    elems[i].addEventListener('mousedown', makeActive);
});

 [].slice.call(document.querySelectorAll('.nav')).forEach(function(ele) { var elems = ele.querySelectorAll('li'); var makeActive = function() { for (var i = 0; i < elems.length; i++) elems[i].classList.remove('active'); this.classList.add('active'); }; for (var i = 0; i < elems.length; i++) elems[i].addEventListener('mousedown', makeActive); }); 

 li.active { color: red; } 

 <ul class="nav"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> <ul class="nav"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> <ul class="nav"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul>