この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成功機能でそれを試してみました方法です：

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明らかに$（「IMG」）セレクタは、すべてのimg要素を選択しますアニメーションのコールバック

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

Answer 2

まあ内部の画像インスタンスを参照します。変数として変更したボタンをどこかに保存する必要があります。例えば、data-image_id属性を指すことによって。

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