在 ajax 成功响应上调用 data-id答案

【问题标题】：call data-id on ajax success response在 ajax 成功响应上调用 data-id
【发布时间】：2017-12-08 01:40:53
【问题描述】：

最初我有一个“点赞按钮”，它工作得非常顺利，它看起来像这样：

<a href="javascript:void();" class="like" id="<?php echo $row['id']; ?>">Like <span><?php echo likes($row['id']); ?></span></a>

这里是 Ajax 代码：

<script>
    $(function(){
        $(".like").click(function(){

            var postid = $(this).attr("id");
              $.ajax({
                type:'POST',
                url:'addlike.php',
                data:'id='+postid,
                success:function(data){
                   if(data=="you already liked this post"){
                       alert(data);
                     }
                   else{
                      $('a#'+postid).html(data);
                      }
                }
            });

        });
    });

</script>

如果 AJAX 成功，addlike.php 将有两种响应，如果用户已经喜欢它，则提醒“您已经喜欢该帖子”，或者更新的喜欢数量。例如，如果当前有 10 个赞，当用户点击按钮时，$('a#'+postid).html(data) 会从 10 变为 11，因为此时数据将是更新后的赞数，并且 $('a#'+postid) 选择刚刚被点击的“like button”。

出于某种原因，我必须使用 data-id 而不是 id 作为按钮的 html id。更详细的解释请看这里：Disable boostrap toggle collapse for one class and enable it for another

现在我必须在 ajax 成功响应中调用具有 data-id 而不是 id 的元素，我该怎么做？我尝试了以下方法：

     $('a#data-id'+postid).html(data);
     $('.[data-id="postid"]').html(data);
     $('a[data-id='+postid']').html(data);
     $('a#'+"[data-id=postid"]).text(data);

但它们都不起作用。提前致谢。

【问题讨论】：

工作正常吗？？

标签： javascript jquery html css ajax

【解决方案1】：

通过data attribute选择元素：

$('a[data-id="'+postid +'"]').html(data);

【讨论】：

@gravition 听到这个消息。

【解决方案2】：

在您的锚标记中创建一个属性 data-id='' ，就像您的 id 属性一样。然后，它会起作用。

【讨论】：

【解决方案3】：

由于post-id 是一个变量并且可以包含任何字符，因此有必要将它放在引号（“”）或单引号（''）之间。此要求适用于除 ID 和 CLASS 之外的所有其他属性，如 docs 中所述

$("a[data-id='" + postid + "']").html(data);

【讨论】：

【解决方案4】：

您已经在单击处理程序中的 $(this) 中引用了该按钮。我建议您将其复制到一个变量中并使用它：

<script>
    $(function(){
        $(".like").click(function(){
            var $linkClicked = $(this);
            var postid = $(this).attr("id");
              $.ajax({
                type:'POST',
                url:'addlike.php',
                data:'id='+postid,
                success:function(data){
                   if(data=="you already liked this post"){
                       alert(data);
                     }
                   else{
                      $linkClicked.html(data);
                      }
                }
            });

        });
    });

</script>

【讨论】：