jQuery соединяет два элемента с разными идентификаторами - PullRequest
Новая
       0

jQuery соединяет два элемента с разными идентификаторами

0 голосов
/ 25 июля 2011

У меня есть эта структура 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.

1 Ответ

2 голосов
/ 25 июля 2011

Прежде всего, у вас есть два div с одинаковым идентификатором. Это неверно Идентификаторы должны быть уникальными. Так что, если вы отбросите среднюю часть своего кода следующим образом: 

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

Затем вы можете использовать это для изменения семейства шрифтов: 

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

Как скрипка ... http://jsfiddle.net/7B7hT/

...