添加一個類來定位目標，並從具有相同類名的其他元素中刪除類

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