javascript - 如何遍历 DOM 中的输入范围滑块列表并使用每个循环捕获值

Question

下面是一个函数，旨在循环一系列具有特定 id 属性的输入滑块并捕获它们的值。这没用。为什么哦'为什么？谢谢你。

JS 小提琴示例

http://jsfiddle.net/V93D4/1/

HTML

<button id='button'>save</button>

<input id="pitchInput_1" type='range'></input>

<input id="pitchInput_2" type='range'></input>

JAVASCRIPT

 $('#button').click(function(){

     $('input[id^="pitchInput_"]').each(function(){
           alert(this.id);
           alert($('input[id^="pitchInput_"]').val()); // Doesn't capture correct val of BOTH sliders. 

        });


    });

Answer 1

是的，val()只获得第一个。

var values = $('input[id^="pitchInput_"]').map(function() {
    return $(this).val();
});
alert(values.join('\n'));

这里，values是滑块值的数组。

Answer 2

对您的代码稍作修改就可以解决问题。

<input id="pitchInput_1" type='range'></input>

<input id="pitchInput_2" type='range'></input>

现在每个循环都会评估滑块的正确值。

$('#button').click(function(){

 $('input[type="range"]').each(function(){
     alert(this.id);
     alert($(this).val()); 
  });
});

在此处查看演示。

除此之外，您只需修改此行即可获得适当的值。

alert($('input[id^="pitchInput_"]').val());

有了这个。

alert($(this).val());

希望能帮助到你。