Как я исправить эту проблему 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+']')