javascript - 切换 bool 数据属性仅适用于一次 Jquery

Question

我正在创建一个待办事项列表，其中每个待办事项的 HTML div 都包含一个 data-completed="true" 属性。

当使用 Jquery 单击待办事项时，我尝试来回切换已完成的属性

它切换到 false，但是当我再次单击时它不会切换回来。尽管点击事件正在传递新值，但 FlipCompleted 变量似乎陷入了 false 状态。

$("body").on("click", ".todo", function() {
    let id = $(this).data("id")
    let completed = $(this).attr("data-completed")
    // dbMethods.updateTodo(id, completed)
    domMethods.updateTodo.call(this, completed)
    event.stopPropagation()
})

updateTodo: function(completed) {
        let flipCompleted = !completed
        $(this).children('.todo-title').toggleClass("completed");
        $(this).data("completed", flipCompleted);
    }

HTML:

<div class="todo" data-id="5de7d31d753b914d6f714cab" data-completed="true">
                <div class="todo-title"><h4>Go to shops</h4></div> 
                <button class="delete"><i class="fas fa-trash-alt" aria-hidden="true"></i></button>
            </div>

我尝试使用 .attr() 和 .data() 更改它，两者都只能工作一次。

我不确定我做错了什么，因此我们将不胜感激。

Answer 1

通过修复代码中的不一致问题可能可以解决。你有这个:

$("body").on("click", ".todo", function() {
    ...
    // this bit of code right here:
    let completed = $(this).attr("data-completed")
    ...
})
updateTodo: function(completed) {
        ...
        $(this).data("completed", flipCompleted);
    }

但是您想在这两种情况下使用 jQuery .data 函数

$("body").on("click", ".todo", function() {
    ...
    // this bit of code right here:
    let completed = $(this).data("completed")
    ...
})