.class button on click

Question

У меня есть div с несколькими кнопками, и у меня есть следующий код, где, когда пользователь нажимает на одну из подобных кнопок, он возвращает значение data-catid.

$('.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'); 
        }); 
     }); 

Моя проблема заключается в том, чтобы вернуть ее только к единственной нажатой кнопке, которая возвращает значение всем кнопкам. Я знаю, что это как-то связано с этой линией

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

но я не уверен, как это исправить.

Любые предложения? Спасибо

Answer 1

Вам необходимо обновить текущий элемент, нажав кнопку, так что используйте переменную закрытия, чтобы сохранить ссылку на элемент с щелчком, затем используйте эту ссылку для обратного вызова ajax.

$('.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); 
    }); 
}); 

Answer 2

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

Не могли бы вы попробовать, если это работает?

Answer 3

Просто обновите только текущий элемент.

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