Question

最初我有一个＆＃34;喜欢按钮＆＃34;这工作非常顺利，看起来像这样：

<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将有两种响应，要么是警告，要么是＃34;你已经喜欢这个帖子＆＃34;如果用户已经喜欢它，或者更新了喜欢的数量。例如，如果当前有10个喜欢，当用户点击按钮时，$（＆＃39; a＃＆＃39; + postid）.html（数据）将改为10到11，因为在这种情况下数据将是更新的喜欢数量，$（＆＃39;＃＆＃39; + postid）选择＆＃34; like like按钮＆＃34;只是被点击了。

出于某种原因，我必须使用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);

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

Answer 1

按data attribute选择元素：

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

Answer 2

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

Answer 3

由于post-id是一个变量并且可以包含任何字符，因此必须将其放在引号（＆＃34;＆＃34;）或简单引号（＆＃39;＆＃39）之间）。此要求适用于ID和CLASS以外的所有其他属性，如docs

中所述

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

Answer 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>

在ajax成功回复

4 个答案: