javascript - Jquery 获取 .each 循环内 slider 的值

Question

我有 3 个 slider (它们是动态的，因此我需要循环遍历它们)。

我这里有一个 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));

}

但是，“数字”或 slider 的值始终为空:

如何在上面的 .each 循环中获取每个 slider 的正确值？

谢谢，

标记

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);
});

为价格和 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);
});

完整的 fiddle : http://jsfiddle.net/Wwwtv/2/