jQuery動態更改css /文本

Question

我在做什麼錯了？ 我想動態地改變divs的文本，並添加/刪除css類到這個divs。 「 有夫婦的div名稱相同，但不同的ID

<div class="mydiv" id="1">Text</div> 
<div class="mydiv" id="2">Text</div> 
<div class="mydiv" id="3">Text</div> 

<input type="hidden" name="myfield" id="myfield" value="myvalue" /> 

我發送Ajax後到Spring MVC的控制器，完美得到答案（數據）真或假。但是，正如我所看到的，它首先產生所有值$（「.mydiv」）。attr（「id」），並且在這個成功之後並沒有看到this.id用於改變它。我該如何解決這個問題？

$(document).ready(function() { 
    $.each($('.mydiv'), function() { 
     var code = $(".mydiv").attr("id"); 

     $.ajax({ 
      url: '/mycontroller', 
      type: 'POST', 
      dataType: 'json', 
      data: { 
       id: $("#myfield").attr("value"), 
       codeId: this.id 
      }, 
      success: function (data) { 
       if (data == false) { 
        $("#" + this.id).addClass("myNewClass"); 
        $("#" + this.id).text("FirstText"); 
       } else { 
        $("#" + this.id).removeClass("myNewClass"); 
        $("#" + this.id).text("SecondText"); 
       } 
      } 
     }); 
    }); 
}); 

Answer 1

嘗試

看起來像有多個問題，首先是循環中，阿賈克斯成功的執行上下文回調等

$(document).ready(function() { 
    $('.mydiv').each(function() { 
     //use this.id to get the current elements id - $(".mydiv").attr("id") will give the id of first element with class mydiv 
     var code = this.id; 

     $.ajax({ 
      url: '/mycontroller', 
      type: 'POST', 
      dataType: 'json', 
      data: { 
       id: $("#myfield").attr("value"), 
       codeId: this.id 
      }, 
      success: $.proxy(function (data) { 
       //inside the callback this was not pointing the element, here a proxy based soution is used 
       //another solution is to assign var self = this; before the ajax request and then instead of this inside the function use self 
       if (data == false) { 
        $(this).addClass("myNewClass"); 
        $(this).text("FirstText"); 
       } else { 
        $(this).removeClass("myNewClass"); 
        $(this).text("SecondText"); 
       } 
      }, this) 
     }); 
    }); 
}); 

Answer 2

嘗試.html()代替.text()