Ajax调用后不应用AddClass方法

Question

我试图将CSS类应用于我的DOM HTML元素。这是我的HTML代码：插入到div中的i元素。

<div class="delete delete_next" data-url="{{call.url}}" data-def="{{ call.person._id }}" data-annonce="{{ annonce._id }}"><i class="fa fa-check"></i></div> 

在Javascript中，我正在做一个Ajax查询。如果我得到的json data.url等于我在JS中的url变量。我试图添加一个CSS类到div旁边的元素。

$('.delete_next').each(function(){ 

    var diff = $(this).data('def'); 
    var annonce = $(this).data('annonce'); 
    var url = $(this).data('url'); 

    $.ajax({ 
     url: 'index.php', 
     data: { 
      module: 'admin', 
      action: 'call_url', 
      diff: diff, 
      ann: annonce 
     }, 
     dataType : 'json', 
     success : function(data){ 
      if(data.url == url){ 
       $(this).next().addClass('valdiate'); 
      } 
     } 
    }) 
}); 

最后这里的CSS类：

<style> 
    .valdiate{ 
     color: #327334; 
     opacity: 1; 
    } 
</style> 

那么，什么是错在我的代码。

感谢

Answer 1

你失去this上下文中success处理器

使用.bind(this)

OR

AJAX调用之前var _this=this;和使用$(_this).next().addClass('valdiate');

试试这个：

$('.delete_next').each(function() { 
 
    var diff = $(this).data('def'); 
 
    var annonce = $(this).data('annonce'); 
 
    var url = $(this).data('url'); 
 

 
    $.ajax({ 
 
    url: 'index.php', 
 
    data: { 
 
     module: 'admin', 
 
     action: 'call_url', 
 
     diff: diff, 
 
     ann: annonce 
 
    }, 
 
    dataType: 'json', 
 
    success: function(data) { 
 
     if (data.url == url) { 
 
     $(this).next().addClass('valdiate'); 
 
     } 
 
    }.bind(this) 
 
    }) 
 
});

编辑：您还可以在ajax settings，使用context这个对象将是所有Ajax相关回调

Answer 2

的环境下使用当前元素的这个变量

$('.delete_next').each(function(){ 
    var curelm = $(this); 
    var diff = $(this).data('def'); 
    var annonce = $(this).data('annonce'); 
    var url = $(this).data('url'); 

    $.ajax({ 
     url: 'index.php', 
     data: { 
      module: 'admin', 
      action: 'call_url', 
      diff: diff, 
      ann: annonce 
     }, 
     dataType : 'json', 
     success : function(data){ 
      if(data.url == url){ 
       curelm.next().addClass('valdiate'); 
      } 
     } 
    }) 
});