Question

所以我有一个项目，我试图让用户喜欢一个列表。我正在尝试使用按钮和jquery来完成此任务。

按钮设置如下：

<button type="submit" name="fav" id="fav" data-action="add" data-listing-id="40" class="btn btn-default btn-xs"><i class="fa fa-star-o pull-left notfav"></i> Add to Favorites</button>

当他们点击按钮时，我想使用AJAX调用php脚本并将其传递给列表ID和操作。然后它处理收藏的请求，然后返回成功或失败。然后，如果它成功，我想将动作属性更改为＆＃34;删除＆＃34; （如果我只是将其添加为收藏夹）并更改HTML以显示＆＃34;我最喜欢的＆＃34; - 所以他们知道最喜欢的是。

这是我目前的JS：

jQuery(document).ready(function($) {
$("#fav").click(function(){
    var action = $(this).data("action");
    var id = $(this).data("listing-id");
    var dataString = 'id='+id+'&action='+action;
    $.ajax({
        type: "POST",
        url: "/favsubmit.php",
        data: dataString,
        cache: false,
        success: function(result){
            if(result=="login"){
                window.location.href = "/user_login.php";
            }else if(result=="success"){
                if(action=="add"){
                    $("#fav").html('<i class="fa fa-star pull-left fav"></i> My Favorite').button("refresh");
                    $("#fav").attr("data-action","delete");
                }else if(action=="delete"){
                    $("#fav").html('<i class="fa fa-star-o pull-left notfav"></i> Add to Favorites').button("refresh");
                    $("#fav").attr("data-action","add");
                }
            } else if (result=="fail"){
                console.log(result);
            }
        }
    });
});

}）;

现在......问题是上面的HTML和JS在第一次点击时工作。但随后点击它不会获取更改的数据操作值。因此，如果它不是最喜欢的，我点击按钮，它会将其更改为＆＃34;我最喜欢的＆＃34;以及＆＃34;删除＆＃34;但是当我再次单击该按钮时，它会再次尝试添加收藏夹。它没有看到删除的新动作值？

有人能发现我的问题吗？

谢谢！

Answer 1

如果您要使用.data阅读数据，则还应使用.data进行设置：

$("#fav").data("action","delete");

jQuery的数据在设置时不使用data属性来存储数据，它实际上将它存储在某种形式的js对象中。它将从属性中读取初始值，然后移动到对象。

来自jquery documentation：

数据属性在第一次访问数据属性时被拉出，然后不再被访问或变异（所有数据值都在内部存储在jQuery中）。

设置属性后，jquery在后续单击时不读取数据属性

1 个答案: