Question

我正在处理TODO列表。在收到用户输入后，我还希望用户可以选择单击已完成的任务并使Javascript应用line-through样式。

这是我的代码：

document.addEventListener('click', function(){
        var finish = document.getElementById('div'); 
        finish.style.setProperty("text-decoration", "line-through");
    });

此时，点击事件有效，但line-through样式仅适用于最顶层的任务。

循环访问任务列表的最佳方法是什么，以便可以将样式应用于所有人。这是一张图片来说明。

enter image description here

我是Javascript的新手。

由于

Answer 1

Aaai aai aai有些错误：）

 var finish = document.getElementById('div');

我怀疑你在每一行都重用了id'div'？身份证是独一无二的！所以它只适用于一件事。使用id'div'也很混乱:)因为div是标记名

我还认为您的目的是点击该行并执行line-through？

当您点击整个网页而不仅仅是线路时，您添加了“点火”的听众？

您应该执行类似

的操作

var firstline = document.getElementById('firstline');
firstline.onclick = function()
{
    this.style.setProperty("text-decoration", "line-through");
}

Answer 2

你可能想要这样的东西：

http://jsfiddle.net/L1awL7rw/1/

document.getElementById('test').addEventListener('click', function(){
if(event.target.tagName=='LABEL'){
    event.target.setAttribute('class','strike');
}
});

我点了几个label元素，点击它们，添加了一个类strike，它应用了CSS规则text-decoration:line-through。如果您共享了一些HTML代码，那么根据您的要求，答案会更具体。

此外，正如您要求循环遍历每个元素并使用addEventListener附加侦听器一样，我发现这种方法并不像Event Delegation那样令人敬畏。

如何循环addEventListener以在Javascript中应用样式属性

2 个答案: