将一个类添加到目标并从具有相同类名的其他元素中删除该类

Question

我试图找出一种方法，可以将一个类添加到目标元素，同时从另一个具有相同类的元素中删除一个类。

到目前为止，我已经有了这段代码。 该代码可以按需工作，但是它说该对象未定义，我对此感到困惑。 有没有更好的方法来做我想做的事情？

它必须使用纯香草javascript。 在此先感谢HTML

<ul class="number-container"><li class="number-item"><span class="number number-active" data-number="zero"></span></li>
<li class="number-item"><span class="number" data-number="one">1</span></li>
<li class="number-item"><span class="number" data-number="two">2</span></li>
<li class="number-item"><span class="number" data-number="three">3</span></li>
<li class="number-item"><span class="number" data-number="four">4</span></li>
<li class="number-item"><span class="number" data-number="five">5</span></li>
<li class="number-item"><span class="number" data-number="six">6</span></li>
<li class="number-item"><span class="number" data-number="seven">7</span></li>
<li class="number-item"><span class="number" data-number="eight">8</span></li>
<li class="number-item"><span class="number" data-number="nine"></span></li>
</ul>

使用Javascript

// store elements in dom
var numberButtons = document.querySelectorAll(".number");

// loop to add event listener to each button
for (var i = 0; i < numberButtons.length; i++) {

    // add click event listener
    numberButtons[i].addEventListener("click", changeButton);
}

    function changeButton(e) {

        // get dataset value
        var target = e.target;
        var targetDataset = e.currentTarget.dataset.number;

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

            numberButtons[i].classList.remove("number-active");

            if (targetDataset === "zero") {
                target.classList.add("number-active");
            } else if (targetDataset === "one") {
                target.classList.add("number-active");
            } else if (targetDataset === "two") {
                target.classList.add("number-active");
            } else if (targetDataset === "three") {
                target.classList.add("number-active");
            } else if (targetDataset === "four") {
                target.classList.add("number-active");
            } else if (targetDataset === "five") {
                target.classList.add("number-active");
            } else if (targetDataset === "six") {
                target.classList.add("number-active");
            } else if (targetDataset === "seven") {
                target.classList.add("number-active");
            } else if (targetDataset === "eight") {
                target.classList.add("number-active");
            } else if (targetDataset === "nine") {
                target.classList.add("number-active");
            }

        }

    }

Answer 1

编辑：您的最初错误是for (var i = 0; i <= numberButtons.length; i++) { ，您需要一个< ，而不是一个<= 。

---

您需要data-number属性做什么？ 在target您已经具有选定的元素。 您的脚本可以简化：

var numberButtons = document.getElementsByClassName("number");
for (var i = 0; i < numberButtons.length; i++) {
  numberButtons[i].addEventListener("click", changeButton);
}

function changeButton(e) {
  var oldActive = document.getElementsByClassName("number-active");
  // depending on your usage you could also replace oldActive by numberButtons
  for (var i = 0; i < oldActive.length; i++) {
    oldActive[i].classList.remove("number-active");
  }
  e.target.classList.add("number-active");
}

我将示例上传到Codepen 。

Answer 2

一种有效的方法是使用JavaScript保持某些先前状态。 更进一步，以下代码通过使用闭包隐藏状态。

function selector(token) {
  var last;
  return function(element) {
    if (element !== last) {
      if (last) last.classList.remove(token);
      element.classList.add(token);
      last = element;
    }
  }
}

var select = selector('number-active');

document.querySelector('ul').addEventListener('click', function(e) {
  var target = e.target;
  if (target.classList.contains('number')) {
    select(target);
  }
});

https://jsfiddle.net/7qdqxzrs/

undefined错误来自for语句的条件检入。 ES6具有for..of ，这可以使事情变得更容易。

for (var numberButton of numberButtons) {...}