Question

我有一个有序的元素列表，每个元素都有一个动态生成的类，以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/

Answer 1

你为什么不这样做：

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

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

1 个答案: