jQueryのは、私がする必要がどのような異なるIDを持つ2つの要素

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形式のリストが作成されても同じ動作をするようにするにはどうすればよいですか。

私が抱えている問題は、<select>のフォントを変更すると、上記のhtml形式がそのように表示され、すべてが<span>と表示されているということです。

Answer 1

まず、同じIDを持つ2つのdivがあります。これは無効です。 IDは一意である必要があります。だから、あなたがそうのようなあなたのコードの中間部分を捨てる場合：フィドルとして

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

... http://jsfiddle.net/7B7hT/