0

我有 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 循环中获得每个滑块的正确值？

谢谢你，

标记

4

1 回答 1

2

jQuery 的 each 函数实际上给了你两个变量：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);
});

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

于 2013-09-13T15:27:59.360 回答