切换布尔数据属性仅在Jquery中起作用一次

Question

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

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

它切换为false，但是当我再次单击时，它不会切换回。尽管click事件传递了新值，但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

我想问题是您尝试将data-comleted="true"的值用作布尔值，但它是一个字符串。

所以要翻转它，你应该做这样的事情。

let flipCompleted = completed == 'true' ? 'false' : 'true';

Answer 2

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

$("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")
    ...
})