Javascript 向目标添加类，并从具有相同类名的其他元素中删除类

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

到目前为止，我有这个代码。代码按预期工作，但是它说对象未定义，我不明白为什么会这样。有没有更好的方法来做我想做的事情

它必须是纯香草javascript。提前谢谢 HTML

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");
            }

        }

    }

---

编辑：您最初的错误是var i=0的行；i一种有效的方法是使用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);
  }
});

未定义的错误来自条件签入for语句。ES6有…的，这可以使事情变得更容易

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

---

我相信我需要数据编号，因为当按下按钮时，它会将页面移动到某个位置，并显示/隐藏其他元素；我只有两个注意事项：不必调用target.classList.addnumber-active；在for循环中。目标已经包含单击的元素，因此在for循环外调用它一次就足够了。为了识别单击的按钮，您可以修改addEventListener调用，以包含类似changeButton.bindnull的i，并将changeButton签名更改为函数changeButtonselected，e或通过target.firstChild.nodeValue识别按钮的编号内容。

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);
  }
});

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