0
我有一個有序的元素列表,每個元素都有一個以sets-或reps開頭的動態生成的類。 我想要更新具有生成的類的跨度文本,並使用與文本跨度具有相同類的選擇值的值。
換句話說,當我從下拉列表中選擇3時,我希望上面的跨度文本更改爲3.
到目前爲止,我已設法使用選項值更新跨度文本,但更新發生在所有<li>
標籤,因爲我還沒有匹配生成的類。 我該如何檢查span的類和我改變的select標籤的類是否匹配?更新帶動態類的選擇值的文本字段
HTML:
<ol>
<li>
<h5 class="toggle">
<span class="sets174">1</span> x <span class="reps174">1</span><a href="http://localhost:8888/wordpress/test/" title="test">test
</a>
</h5>
<div class="toggle-content" style="display: none;">
<p></p>
sets:
<select name="sets" class="sets174"><option>1</option><option>2</option><option>3</option>
</select>
reps: <select name="reps" class="reps174"><option>1</option><option>2</option><option>3</option></select></div></div>
</li>
<li>/*class=」sets374」 etc*/</li>
<ol>
JS:
var setsSpan = $('.toggle span[class*="sets"]'),
repsSpan = $('.toggle span[class*="reps"]'),
setsSelect = $('.toggle-content select[class*="sets"]'),
repsSelect = $('.toggle-content select[class*="reps"]'),
toggleContentClass = $('.toggle-content select').attr('class');
var setsLength = setsSpan.length;
setsSpan.text(setsSelect.val());
repsSpan.text(repsSelect.val());
setsSelect.change(function() {
//if the class of this matches the class of a setsSpan element then do the next thing?
setsSpan.text($(this).val());
});
repsSelect.change(function() {
repsSpan.text($(this).val());
});
小提琴:http://jsfiddle.net/AknoxA/WGh8d/4/