如何解決這個jquery / ajax問題？

Question

基本上我有一個如下表：

<tbody>   
  <tr>
    <td><img class="img-thumbnail" src="./images/no_image.png" width="100" height="100"></td>
    <td><button class="change_image" data-image_id="1">Change Image</button></td>
    <td><input type="text" name="sort[]" size="7" placeholder="Sort order"></td>      
  </tr>    
  <tr>
    <td><img class="img-thumbnail" src="./images/no_image.png" width="100" height="100"></td>
    <td><button class="change_image" data-image_id="2">Change Image</button></td>
    <td><input type="text" name="sort[]" size="7" placeholder="Sort order"></td>      
  </tr>    
  <tr>
    <td><img class="img-thumbnail" src="./images/no_image.png" width="100" height="100"></td>
    <td><button class="change_image" data-image_id="3">Change Image</button></td>
    <td><input type="text" name="sort[]" size="7" placeholder="Sort order"></td>      
  </tr>
</tbody>

單擊.change_image按鈕時，它會打開一個模態以更改該圖像。

這是我的模態打開的方式：

$('#manage_images').on('click', '.change_image', function(){
  window.tr = $(this).parents('tr'); 
  var image_id = $(this).data("image_id")

  $('#chage_pro_image_form')
    .find('[name="image_id"]').val(image_id).end();

  $("#modal").modal({
    "backdrop"  : "static",
    "keyboard"  : true,
    "show"      : true
  });
});

接下來，我要提交表單（以模式形式）以更改此圖像。 我使用jquery/ajax正確地做到了

現在，我想在ajax成功后用此表行上的新更改圖像替換舊圖像。

這是我在ajax成功函數中嘗試過的方法：

success: function(json) {
  var json = JSON.parse(json);        
  if (json.success) {
    $('#modal.modal').modal('hide');
    $('#chage_pro_image_form').formValidation('resetForm', true);

    d = new Date();  
    window.tr.find('img').fadeOut(1000, function() {
      $("img").attr("src", json.image+"?"+d.getTime());
    }).fadeIn(1000);
  } else {
    // my errors   
  }
}

我的問題是，它將表中的所有現有圖像替換為新圖像。 我創建了一個全局變量window.tr 。 但這對我不起作用。

有人可以幫我解決這個問題嗎？ 謝謝。

Answer 1

使用this來引用動畫回調內的圖像實例

window.tr.find('img').fadeOut(1000, function() {
      $(this).attr("src", json.image+"?"+d.getTime());
}).fadeIn(1000);

Answer 2

顯然，$（“ img”）選擇器將選擇所有img元素。 您需要在某個地方存儲將哪個按鈕更改為變量。 例如，通過指向data-image_id屬性。 然后您可以使用以下命令選擇它：

 $('[data-image_id='+image_id+']')