jQuery的不同ID的

Question

我有這樣的結構HTML建立連接兩個元素...

<div id="TemplateSettings_TextSettings_StoreTitle_Font_preview"> 
<select name="TemplateSettings_TextSettings_StoreTitle_Font" id="TemplateSettings_TextSettings_StoreTitle_Font" class="valid"> 
<option selected="yes">Arial</option> 
<option>Arial Black</option> 
<option>Bookman Old Style</option> 
<option>Comic Sans MS</option> 
</select> 
</div> 

<div id="TemplateSettings_TextSettings_StoreTitle_Font_preview"> 
<span style="font-family: Impact;">This is preview text.</span> 
</div> 

我需要做的是改變的時候就<select>的字體動態改變字體家庭的<span> 。現在我可以在一個單獨的部分上做到這一點。我的問題是有一個html格式的列表，所以我需要能夠連接/創建該<select>和它的'兄弟'<span>之間的關聯。

如何連接這兩個，並且<select>僅影響<span>，以便如果完成該html格式的列表，則它的工作原理相同。

我一直存在的問題是，上面的html格式被列爲這樣，所以如果我更改<select>上的字體，它會影響所有列出的<span> s。

Answer 1

首先，你有兩個ID相同的div。這是無效的。 ID的需要是獨一無二的。所以，如果你拋棄你的代碼的中間部分，像這樣：

<div id="TemplateSettings_TextSettings_StoreTitle_Font_preview"> 
<select name="TemplateSettings_TextSettings_StoreTitle_Font" id="TemplateSettings_TextSettings_StoreTitle_Font" class="valid"> 
<option selected="yes">Arial</option> 
<option>Arial Black</option> 
<option>Bookman Old Style</option> 
<option>Comic Sans MS</option> 
</select> 
<span style="font-family: Impact;">This is preview text.</span> 
</div> 

然後你可以用它來改變你FONT-FAMILY：

$(document).ready(function(){ 
    $("select").change(function() { 
     $(this).next("span").css("font-family",$(this).val()); 
    }); 
}); 

作爲小提琴...... http://jsfiddle.net/7B7hT/