使用 jQuery 更新按钮上的 data-attr

Posted 2023-03-05

【中文标题】使用 jQuery 更新按钮上的 data-attr

【英文标题】：Updating data-attr on a button with jQuery

【发布时间】：2018-09-04 13:32:52

【问题描述】：

我正在尝试在成功响应中将('.follow') 元素的data-action 属性更新为unfollow，但它没有更新。

我做错了什么？

$('.follow').click(function() 
    var id = $(this).data("id");
    var action = $(this).data("action");
    var url = '/action/' + action;
    $.ajax(
        url: url,
        headers: 
            'TOKEN': $('meta[name="csrf-token"]').attr('content')
        ,
        data: 
            id: id
        ,
        type: "POST",
        success: function(v) 
            if (v.response == "OK") 
                $(this).data('action', 'unfollow');
            
            if (v.response == "E") 
                alert('there was an error');
            
        
    );
);

编辑

添加有问题的元素是一个按钮的事实，因为下面提供的解决方案仍然不起作用。

<button class="follow" data-id="<?php echo $profile->id; ?>" data-action="follow">FOLLOW</button>

第二次编辑

只是想更新这个问题，以防其他人发现自己处于类似情况。

事实证明，Nir Tzezana 接受的答案是绝对正确的。我无法让它工作的原因是 Firefox 有问题。这不是第一次发生这样的事情，但我总是忘记这可能是一个问题。

所以，故事的寓意.. 如果您使用的是 Firefox，并且您确信您的代码可以正常工作 - 但它似乎无法正常工作 - 退出 Firefox 并重新启动它（尤其是如果您有浏览器长时间打开）。您的代码可能一直在工作。

【问题讨论】：

但它没有更新 -- 你如何确保它不起作用？

1) 因为它没有更新元素和 2) 因为当我再次单击该按钮时，它会将关注操作发送到服务器，而不是取消关注操作。

【参考方案1】：

$(this)指的是返回函数。 使用粗箭头函数或这个self 技巧。

$('.follow').click(function () 
   var id = $(this).data("id");
   var action = $(this).data("action");

   // Define self to be the .follow element
   var self = $(this);

   var url = '/action/' + action;

   $.ajax(

       url: url,
       headers: 
             'TOKEN': $('meta[name="csrf-token"]').attr('content')
       ,
       data: 
           id: id
       ,
       type: "POST",

       success: function(v)

           if (v.response == "OK") 

               self.data('action', 'unfollow');
           

           if  (v.response == "E") 

               alert('there was an error');
           
       
   );

);

【讨论】：

这些解决方案都不起作用，尽管我可以看到它们都是正确的。 ('.follow') 元素是一个按钮这一事实是否有所作为？ <button class="follow" data-id="<?php echo $profile->id; ?>" data-action="follow">FOLLOW</button>

试试self.attr("data-action","unfollow");

该死的。 self.data... 毕竟工作。 Firefox 只是在玩。我已经不是第一次因为 Firefox 需要重启而浪费了几个小时。谢谢你们的帮助。

【参考方案2】：

this deosn't 引用当前元素，即 .follow 在 $.ajax() 成功处理程序中。你可以使用$.ajax() context option

$('.follow').click(function () 
    $.ajax(
        context: this,
        success: function()
           //this: it will refer to clicked button
        
    );
);

而<button> 元素的默认操作是submit，如果按钮被包裹在表单中，则使用type="button"

<button type="button" class="follow" data-id="<?php echo $profile->id; ?>" data-action="follow">FOLLOW</button>

【讨论】：

以前从未使用过context。这很棒！尽管在这种情况下它不起作用。也许是因为我正在调用一个按钮元素？ <button class="follow" data-id="<?php echo $profile->id; ?>" data-action="follow">FOLLOW</button>

@spice，你的按钮包裹在表单中吗？然后使用type="button"

@Saptal 尝试过并尝试将按钮更改为常规 div。 <div class="btn-follow" data-id="<?php echo $profile->id; ?>" data-action="follow">FOLLOW</div>。和$('.btn-follow').click(function () ... 仍然无法正常工作。我要疯了吗？