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) {...}

添加一个类来定位并从具有相同类名的其他元素中删除类

2 个答案: