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

}

ただし、スライダーの「数値」または値は常に null です。

スクリーンショット

上記の .each ループ内で、各スライダーの正しい値を取得するにはどうすればよいですか?

ありがとうございました、

マーク

4

1 に答える 1

2

jQuery の each 関数は、実際には index と Element http://api.jquery.com/each/の 2 つの変数を提供します。

各要素の値が必要だとすると、次のようになります。

$('.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/

于 2013-09-13T15:27:59.360 に答える