时间戳

首页 > 解决方案 > 切换布尔数据属性仅适用于一次 Jquery

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

问题描述

我正在创建一个待办事项列表，每个待办事项的 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()都只能工作一次。

我不确定我做错了什么，所以任何帮助将不胜感激。

标签： javascriptjqueryhtmlattr

解决方案

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

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

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

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

推荐阅读