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

显然，$（＆＃34; img＆＃34;）选择器将选择所有img元素。您需要在某处存储您更改为变量的按钮。例如，通过指向data-image_id属性。然后你可以使用：

选择它

＆＃13;

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

＆＃13;

我如何解决这个jquery / ajax问题？

2 个答案: