javascript - 如何使用 laravel 和 Ajax 将响应结果附加到特定类上

Question

我在使用 ajax 和 laravel 进行实时点赞数方面遇到问题，因此一旦响应成功，响应结果将附加到特定的类，但是当我单击“点赞”按钮时就会发生这种情况。每个类(class)都将结果相加。以便更好地理解。请参阅下面的附图。

问题:如何将结果附加到特定的“赞”按钮上。

插图:

Html 循环数据:

 echo '<a class="nav-link btn_like_each_content" data-attri-like-content="'.$latest_news_data->content_id.'" style="color:#757a91; font-size:13px;"><i class="far fa-thumbs-up" style="color:#757a91; font-size:13px;" ></i> <label class="total_count_of_like_each_content" >0</label> Likes</a>';

前端:

$('a.btn_like_each_content').on('click',function(){

    var content_id = $(this).attr("data-attri-like-content");


    var data = content_id;

    $.ajax({
        url: "/total_count_like_each_comment",
        type:'post',
        data:{like_id:data},
        success: function( response ) {

            if(response == 'Clicked') {

              $.ajax({
                url:"/retrive_like_count_each_content",
                type:'get',
                data:{content_id: data},
                dataType:'JSON',
                success:function(res) {

                    var total_count_of_specific_content = res[0]['count_like'];

                    var parseTotalLike = parseInt(total_count_of_specific_content);
                    $('.total_count_of_like_each_content').text( parseTotalLike );



                },
                error:function(err) {
                  alert('Failed To Insert');

                }

              })

            }

        }
    });


  });

谢谢你..

Answer 1

给每个类一个唯一的id

echo '<a class="nav-link btn_like_each_content" id="content_'.$latest_news_data->content_id.'" data-attri-like-content="'.$latest_news_data->content_id.'" style="color:#757a91; font-size:13px;"><i class="far fa-thumbs-up" style="color:#757a91; font-size:13px;" ></i> <label class="total_count_of_like_each_content" >0</label> Likes</a>';

现在通过定义变量来跟踪点击了哪些内容

$('a.btn_like_each_content').on('click',function(){

var content_id = $(this).attr("data-attri-like-content");

var actual_content_id = $(this).attr("id");

var data = content_id;

$.ajax({
    url: "/total_count_like_each_comment",
    type:'post',
    data:{like_id:data},
    success: function( response ) {

        if(response == 'Clicked') {

          $.ajax({
            url:"/retrive_like_count_each_content",
            type:'get',
            data:{content_id: data},
            dataType:'JSON',
            success:function(res) {

                var total_count_of_specific_content = res[0]['count_like'];

                var parseTotalLike = parseInt(total_count_of_specific_content);
                $('#' + actual_content_id).text( parseTotalLike ); //Pass actual content ID here



            },
            error:function(err) {
              alert('Failed To Insert');

            }

          })

        }

    }
});

});