jQuery如何獲取選擇更改圖像，ajax工作在多個窗體？

Question

我需要選擇更改一些數據，並以自己的形式更改圖像 每個都會有自己的預覽圖像。 每個圖像將從選定的選項中獲得名稱「imagePreview」attr。 如果沒有在ATTR或imagePreview =「0」不會做任何事情

這裏我的一些工作的紙條，但是當我改變選項DIV標籤的所有圖像預覽會改變不只是在形式...... 請幫助我讓它工作>。 <

腳本

<script type="text/javascript"> 
$(document).ready(function() { 
$('.choose').change(function(event) { 
    var update = $(this).prev(); 
    //------ 
    var src = $("option:selected").attr("imagePreview"); 
    $(".imagePreview").html(src ? "<img src='" + src + "'>" : ""); 
    //----- 
    $.post('select-change-ajax2.php', $(this).closest('form').serialize(), function(data) { 
    update.html(data); 
    }); 
}); 
}); 
</script> 

HTML表單

<form> 
<div class="imagePreview"> 
    displays image here 
</div> 
(etc data this data not change) 
<div class="update">Default Data</div> 
    <select name='selected' class="choose"> 
     <option value="1" imagePreview='/images/1.jpg'>1</option> 
     <option value="2" imagePreview='0'>2</option> 
     </select> 
     <input type='hidden' name='do' value='go' /> 
</form> 

<hr /> 

<form> 
<div class="imagePreview"> 
    displays image here 
</div> 
(etc data this data not change) 
<div class="update">Default Data</div> 
    <select name='selected' class="choose"> 
     <option value="3" imagePreview='/images/1.jpg'>3</option> 
     <option value="4" imagePreview='0'>4</option> 
     </select> 
     <input type='hidden' name='do' value='go' /> 
</form> 

Answer 1

可以發現重要的元素（.imagePreview和<option>）relatively，就像這樣：

$(function() { 
    $('.choose').change(function(event) { 
    var form = $(this).closest("form"), 
     update = form.find(".update"), 
     src = $(this).find("option:selected").attr("imagePreview"); 
    form.find(".imagePreview").html(src ? "<img src='" + src + "'>" : ""); 
    $.post('select-change-ajax2.php', form.serialize(), function(data) { 
     update.html(data); 
    }); 
    }); 
}); 

關鍵是將$("option:selected")和$(".imagePreview")更改爲相對於更改元素，而不是分別選擇他們找到的第一個/所有。

以前是找到第一在選擇<option>任何<form>和所有.imagePreview元素，而不是使用tree traversal我們找到你想要相對<select>（該this），改變的元素。