2014-01-08 80 views
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/

回答

0

你爲什麼不去做這樣的:

setsSelect.change(function() { 
    var spanClass = $(this).attr('class'); 
    $('span.'+spanClass).text($(this).val()); 
}); 
相關問題