单击.class按钮

Question

i have a div with multiple like buttons and i have the following code where when a user press on one of the like buttons it returns the data-catid value.

$('.likes').click(function(){
            var catid;
            catid = $(this).attr("data-catid");
             $.get('/rmb/like_image/', {like_id: catid}, function(data){
                       $('.likes').html(data);
                       $('.likes').attr('disabled','disabled');
                   });
        });

My problem is instead of returning it to the only button that was pressed , its returning the value to all buttons. I know it has something to do with this line

$('.likes').html(data);

but i am not sure how to fix it.

Any suggestions? Thanks

Answer 1

You need to update the current clicked element, so use a closure variable to store the reference to the clicked element then use that reference on the ajax callback.

$('.likes').click(function () {
    var $this = $(this),
        catid = $this.attr("data-catid");
    $.get('/rmb/like_image/', {
        like_id: catid
    }, function (data) {
        $this.html(data).prop('disabled', true);
    });
});