时间戳

首页 > 解决方案 > 如何在 if 语句中引用 li

javascript - 如何在 if 语句中引用 li

问题描述

我正在尝试一些基本的 Javasript 尝试将类名添加到单击的 li 项目中。这是我到目前为止所得到的。

 //click event to toggle todo
ul.addEventListener('click',  function(e){
  if(e.target && e.target.nodeName == "LI") {
    console.log('checked')
    this.classList.add("mystyle");
 }
});

而不是 console.log 我不知道如何访问实际的 li 点击然后添加类名。这似乎没有引用 li。

标签： javascript

解决方案

基本上，如果您已经预定义了列表元素，您可以循环它们并检查它们是否具有您要添加的类。如果您要动态生成列表元素，则必须使用事件委托来添加/删除类。这是预定义列表元素的简单示例 链接在这里

HTML：

<ul class="list-holder">
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
</ul>

JS：

let listElements = document.querySelectorAll('.list-holder li');

for(let i = 0 ; i < listElements.length; i++) {
    listElements[i].addEventListener('click', (event) => {    
    if(!listElements[i].classList.contains('active')) {
      listElements[i].classList.add('active');
    } else {
      listElements[i].classList.remove('active');
    }
  }); 
}

如果你只想保留一个带有活动类的元素，这里有一个更新的 jsfiddle Keep active element only one

推荐阅读