Jquery在.each循环中获取滑块的值

Question

我有3个滑块（它们是动态的，所以我需要循环它们）。

我在这里有一个jsFiddle：http://jsfiddle.net/mtait/R5czJ/

HTML是：

<label for="slider1">item 1</label>
<input type="range" class="mtslide" name="slider1" id="slider1" min="0" max="10" value="0">
<label for="slider2">item 2</label>
<input type="range" class="mtslide" name="slider2" id="slider2" min="0" max="10" value="0">
<label for="slider3">item 3</label>
<input type="range" class="mtslide" name="slider3" id="slider3" min="0" max="10" value="0">

我正在尝试遍历它们，并创建一个JSON字符串：

function slide() {

    var ExtraPrices = [20.00,30.00,50.00];
    var ExtraIDs = [1,2,3];

    var count = 0;
    var arr = [];

    $('.mtslide').each(function () {
    var obj = {
        id: ExtraIDs[count],
        price: ExtraPrices[count],
        number: $(this).slider("option", "value")
    };
    arr.push(obj);
    count += 1;
    });

    alert(JSON.stringify(arr));

}

但是，“数字”或滑块的值始终为空：

如何在上面的.each循环中获得每个滑块的正确值？

谢谢，

标记

Answer 1

jQuery的每个函数实际上都为您提供了两个变量：index和Element http://api.jquery.com/each/

假设你想要每个元素的值，你想要这样的东西：

$('.mtslide').each(function (index, Element) {
    var obj = {
        id: ExtraIDs[index],
        price: ExtraPrices[index],
        number: $(Element).val()
    };
    arr.push(obj);
});

为price和id保留一个单独的数组可能容易出错。您应该考虑在具有data属性的html元素上指定其他值。 http://html5doctor.com/html5-custom-data-attributes/ http://api.jquery.com/data/ 像这样：

<input type="range" class="mtslide" name="slider1" id="slider1" min="0" max="10" value="0" data-price="20.00" data-id="1">
<input type="range" class="mtslide" name="slider2" id="slider2" min="0" max="10" value="0" data-price="30.00" data-id="2">
<input type="range" class="mtslide" name="slider3" id="slider3" min="0" max="10" value="0"  data-price="50.00" data-id="3">

然后你可以更具体地将它们称为元素：

$('.mtslide').each(function (index, Element) {
    var obj = {
        id:  $(Element).data("price"),
        price: $(Element).data("price"),
        number: $(Element).val()
    };
    arr.push(obj);
});

完整的小提琴： http://jsfiddle.net/Wwwtv/2/