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