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>。

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/

jQuery使用不同的id连接两个元素

1 个答案: