区分每个ajax调用的链接

Question

我有一个问题，显示提取的出版物数据库，其中每个出版物我都有一个按钮将其添加到收藏夹。

但是要点击任何按钮，ajax调用的响应会返回我，就像你一次点击全部一样。

代码链接：

<a href="#" class="btn-add" data-id="{!! $aviso->id !!}"> 
  <i class="glyphicon glyphicon-heart-empty"></i> 
 </a>

JS代码：

JS代码ajax调用：

 $(document).ready(function() {
   $('.btn-add').on('click', function(e) {

   var data = $(this).data('id');

  $.ajax({
     type: 'POST',
     url: '{!! url("add-fav") !!}',
     data: { 'id' : data },
     dataType: 'JSON',
    success: function(data){
          if(data.message == 'ok')
          {
              $('.btn-add').html('<i class="glyphicon glyphicon-heart"></i>')
          }
    }
})

  e.preventDefault();

 });
});

如上所述，运行ajax调用的图标，更改，但在所有出版物中。

如果答案代替$（＆＃39; .btn-add＆＃39;）使用$（this），则图标甚至不会更改。

我可以取得成果吗？添加收藏夹，只发布更改的图标？

谢谢你的帮助。来自智利的问候。

Answer 1

您必须缓存JQuery对象：

$('.btn-add').on('click', function(e) {

var $btn = $(this);

成功功能：

$btn.html('<i class="glyphicon glyphicon-heart"></i>')