dblclicked 时使用 jQuery 修改动态生成的 li 元素

Question

我有一个简单的待办事项列表，当生成新的待办事项时，它会创建一个新的 li 元素并将其附加到预先存在的 ul 中。我有一个 toggleAll() 函数，它添加了一个 class ，当双击时它会穿过 li 元素。我现在想做的是创建一个方法，当我双击一个 li 元素时，它会为单击的元素切换直通 class，这样我就可以标记单个 ToDos作为完成。我尝试使用常规 JS 和 jQuery，但都找不到方法。

我的 ToDos 由一个文本属性和一个确定任务是否完成的布尔值组成。切换将布尔值设置为 true，如果布尔值是 true，则将 .marked class 添加到 li 元素的内容。

addTodo: function(todo){
                this.list.push({
                    todoText: todo,
                    completed: false,
                });
                console.log(this.list);
            },


var view = {
            display: function(){
                var printed = document.getElementById('printedList');
                printed.innerHTML = '';
                for(var i = 0; i < todos.list.length; i++){
                    var newLi = document.createElement('li');
                    newLi.innerHTML = todos.list[i].todoText;
                    printed.appendChild(newLi);
                }
            }
        }

 .marked{
            text-decoration: line-through;
        }

<div id='listica'>
    <ul id='printedList'></ul>
</div>

编辑：toggleAll 函数：

toggleAll: function(){
                var printedElements = document.getElementById('printedList');
                for(var i = 0; i < todos.list.length; i++){
                    if(todos.list[i].completed == false){
                        todos.list[i].completed = true;
                        printedElements.style.textDecoration = 'line-through';
                    } else if(todos.list[i].completed == true){
                        todos.list[i].completed = false;
                        printedElements.style.textDecoration = '';
                    }
                };

Answer 1

您可以使用 .addEventListener() 或 jQuery 的 .on()。

对于 .addEventListener，您需要遍历所有 li：

const lis = document.querySelectorAll('li');
lis.foreach(function(li) {
    li.addEventListener('dblclick', function(e) {
        e.target.classList.add('line-through');
    });
});

对于.on()，您不必遍历元素。

$('li').on('dblclick', function(e) {
    $(e.target).addClass('line-through');
});

.on() .addEventListener() event.target NodeList.forEach Element.classList

dblclicked 时使用 jQuery 修改动态生成的 li 元素

Modify dynamically generated li elements with jQuery when dblclicked

javascript

jquery

dom-manipulation