有條件的addClass不能用於具有相同類的每個元素

Question

Les說我有一些具有相同類的按鈕。在頁面加載時，我正在使用每個按鈕的ajax檢查一些值。根據Ajax請求的返回值，我想一些類添加到按鈕，但它不工作，

$(document).ready(function(){ 
    $('.add-remove-permissoion').each(function(){ 
     var child = $(this).val(); 
     var parent = $('#parent-name').text(); 
     $.get('my-url', function(data){ 
      if(data == 1){ 
       $(this).addClass('glyphicon glyphicon-ok'); 
      }else{ 
       $(this).addClass('emptybox-blank'); 
      } 
     }); 
    }); 
}); 

我檢查，我的AJAX請求返回正確的數據。我在這裏做錯了什麼？

Answer 1

this在$.get處理程序的情況下並不是指當前迭代的元素。每個功能都有自己的this值。你有幾個選擇。

1. 使用each回調的第二個參數。

   $('.add-remove-permissoion').each(function(index, element) { 
   

2. 使用$.proxy或用於設定處理程序的this值Function.prototype.bind方法。

   $.get('my-url', function(data) { 
       // ... 
   }.bind(this)); 
   

3. 緩存的each處理器的this價值，並在您$.get處理程序使用它。

   var elem = this; 
   $.get('my-url', function(data) { 
       // ... 
       $(elem)... 
   }); 
   

還要注意，在你的代碼中的語法錯誤：

$.get('my-url'}, function(data){ 
// -----------^ 

Answer 2

問題是$(this)在ajax調用中並不指向被點擊的按鈕。

將$(this).addClass替換爲myElement.addClass。在ajax調用之前的點擊事件中創建myElement：var myElement = $(this)。

Answer 3

問題是這個引用裏面的ajax回調，在success回調中this指的是jqXHR對象不是dom元素引用那就是爲什麼它不工作。

您可以使用一個閉包變量下面給出解決該問題

$(document).ready(function() { 
    $('.add-remove-permissoion').each(function() { 
     var $this = $(this), 
      child = $this.val(); 
     var parent = $('#parent-name').text(); 
     $.get('my-url', {}, function (data) { 
      if (data == 1) { 
       $this.addClass('glyphicon glyphicon-ok'); 
      } else { 
       $this.addClass('emptybox-blank'); 
      } 
     }); 
    }); 
});