无法使用 classList API 选择所有元素

Question

在将 jQuery 代码转换为 HTML5 javascript 时，我在选择所有 LI 标记时遇到问题 代码。我已将 click 事件应用到父 UL，并且 click 事件正在应用到正确的单击目标 LI。 “选定”类也被应用。问题是我需要在应用“选定”类之前从 LI 标记中清除所有类，因为我只希望它应用于当前事件目标。在 jQuery 中，这只是从 LI 中删除类的问题，但是我遇到了针对所有 LI 标记并在 javascript 中删除类的问题。我怀疑问题是我如何迭代从 QuerySelectorAll 返回的节点列表。除其他外，我还尝试了 document.GetElementsByTagName，并对其进行了迭代。

我在 myFunc 函数上收到“Uncaught TypeError: Cannot read property 'contains' of undefined”。

如果有人能指出我的错误，我会非常高兴。

<div id='button'></div>
 <ul id='swatches'>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ul>

jQuery 代码

$('li').on('click', function(){
 $('li').removeClass('selected');
 $(this).toggleClass('selected');
});

使用 classList API

var swatch = document.getElementById('swatches'),
$li = document.querySelectorAll('#swatches li');

swatch.addEventListener('click', myFunc, false);

function myFunc(e){
  var target = e.target;

  for(var i=0; i<$li.length; i++){
   if($li.classList.contains('selected')){
   $li.classList.remove('selected');
  }
} 
if(target.nodeName.toLowerCase() === 'li'){
 e.target.classList.toggle('selected');
}

}

Answer 1

我怀疑问题在于我如何遍历从 QuerySelectorAll 返回的节点列表。

是的。你忘记了索引。应该是

for (var i=0; i<$li.length; i++)
    if ($li[i].classList.contains('selected'))
//         ^^^
        $li[i].classList.remove('selected');
//         ^^^

不过，有两点：

• 您无需在调用remove() 之前测试contains()，除非您明确需要该信息。试图删除一个不存在的类什么都做不了。

• 您可能不需要在每次点击时迭代整个 $li 集合。由于一次只有一个 <li> 与 .selected 类，您可以简单地存储对当前选定元素的引用，或使用

  var cur = swatch.querySelector("li.selected");
  if (cur) cur.classList.remove('selected');
  

  （也可以使用 id）。