Question

我正在尝试一些基本的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。

Answer 1

var myVar  = '<ul class="linksUnit">';
myVar     += '<li>Link 1';
if (myVar2) { // note != false means true
    // insert a nested unordered list
    myVar += '<ul>';
    myVar += '<li>Link 2</li>';
    myVar += '</ul>';
}
myVar     += '</li>'; 
myVar     += '</ul>';

Answer 2

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

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

Answer 3

我这样做的方式是这样的：

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

Toggle无需添加if语句来检查类是否具有名称。

如何在if语句中引用li

3 个答案: