如何解决这个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+']')