Jquery 区分每个ajax调用上的链接

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

但是单击任何按钮，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();

 });
});

$（文档）.ready（函数（）{
$（'.btn add'）。on（'click'，函数（e）{
var data=$（this.data（'id'）；
$.ajax({
键入：“POST”，
url:“{！！url（“添加fav”）！！}”，
数据：{'id'：数据}，
数据类型：“JSON”，
成功：功能（数据）{
如果（data.message=='ok'）
{
$（'.btn add'）.html（''）
}
}
})
e、 预防默认值（）；
});
});

如上所述，运行ajax调用的图标是change，但在所有出版物中都是如此

如果答案而不是$（'.btn add'）使用$（this），图标甚至不会更改

我能达到这样的结果吗？添加收藏夹时，是否只更改出版物的图标

---

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

您必须缓存JQuery对象：

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

var $btn = $(this);

在成功功能方面：

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

$btn.html（“”）

必须缓存JQuery对象：

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

var $btn = $(this);

在成功功能方面：

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

$btn.html（“”）

您正在更新类为“btn add”的所有元素的glyphicon。在ajax请求之前定义$（this）-var that=$（this）；然后将-$（'.btn add'）.html（''）替换为-$（that.html（''）。感谢您的解释，我按照您所说的修复了代码，现在一切都很好。来自智利的问候。您正在更新类为“btn add”的所有元素的glyphicon。在ajax请求之前定义$（this）-var that=$（this）；然后将-$（'.btn add'）.html（''）替换为-$（that.html（''）。感谢您的解释，我按照您所说的修复了代码，现在一切都很好。来自智利的问候。非常感谢您的帮助，朋友，这正是我的代码的问题所在。来自智利的问候。非常感谢您的帮助，朋友，这正是我的代码的问题所在。智利的问候。