call data-id on ajax success response

Question

Originally I have a "like button" that is working very smoothly, and it looked like this:

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

Here is the Ajax code:

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

If AJAX is successful, addlike.php will have two kinds of response, either alert "you already liked the post" if the user already liked it, or the updated number of likes. For example, if there are currently 10 likes, when the user clicked the button, $('a#'+postid).html(data) will change 10 to 11, because in this case the data will be the updated number of likes, and $('a#'+postid) selects the "like button" that is just being clicked.

For some reason, I have to use data-id instead of id for the html id of the button. For more detailed explanation, see here: Disable boostrap toggle collapse for one class and enable it for another

Now I have to call the element which has a data-id instead of id on ajax success response, how can I do it? I tried the following:

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

but none of them works. Thanks in advance.

Answer 1

通过data attribute选择元素：

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

Answer 2

Create a property data-id='' in your anchor tag like your id property. Then, it will work.

Answer 3

Since post-id is a variable and can contain any characters, it's necessary to place it between quotes ("") or simple quotes (''). This requirement applies for every other attribute other than ID and CLASS, as stated in the docs

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

Answer 4

You already have a reference to that button in $(this) inside the click handler. I suggest you copy that into a variable and use that:

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