使用带有动态类的选择值更新文本字段

Question

我有一个有序的元素列表，每个元素都有一个动态生成的类，以 sets- 或 reps 开头。 我想使用与文本跨度具有相同类的选择值的值来更新具有生成类的跨度文本。
换句话说，当我从下拉列表中选择 3 时，我希望上面 span 的文本更改为 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/

Answer 1

你为什么不这样做：

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