0

jQuery UI スライダーを使用するプロジェクトを構築しようとしています。それには人々への調査が含まれ、ユーザーは何かについてどれだけ確信があるかを伝える必要があり、そこでスライダーの出番です。

    $(function() {
    $( "#slider-range-min1" ).slider({
        range: "min",
        value: 0,
        min: 0,
        max: 100,
        slide: function( event, ui ) {
            jQuery( "#amount1" ).val(ui.value + "%" );
        }
    });
$( "#amount1" ).val($( "#slider-range-min1" ).slider( "value" ) + "%" );
});

1 つの質問には 4 ～ 5 個の回答があり、各回答にはスライダーが関連付けられているため、20 の質問の調査では個々のスライダー機能が多すぎます。それらを動的に設定できますが、これを行うためのより良い方法が必要です。1 つの関数ですべてのスライダーを制御し、単に div id と入力 id を渡すのと同じです。

ID の代わりにクラスを使用してみましたが、そうすると、jQuery Ui が実行時に独自のクラスをほとんどスライダーにアタッチしていないように見えるため、スライダーが消えてしまいます。

ありがとう

4

2 に答える 2

1

tjscience の答えは正しいですが、あなたにとっては不完全かもしれません。これはどうですか：

<div class="container">
<input type="text" class="inputField"/>
<div id="answer-1" class="answer"></div>
</div>
<div class="container">
<input type="text" class="inputField"/>
<div id="answer-2" class="answer"></div>
</div>
<div class="container">
<input type="text" class="inputField"/>
<div id="answer-3" class="answer"></div>
</div>

$(".answer").slider({
    range: "min",
    value: 0,
    min: 0,
    max: 100,
    slide: function( event, ui ) {
        var container = $(ui.handle).parents(".container");
        $(container).find(".inputField").val(ui.value);
    }
});
于 2012-05-03T12:02:57.213 に答える
0

1 回の呼び出しですべての回答 div スライダーを単純に作成しようとしていますか? もしそうなら、これはうまくいくはずです：

<div id="answer-1" class="answer"></div>
<div id="answer-2" class="answer"></div>
<div id="answer-3" class="answer"></div>

$(".answer").slider({
        range: "min",
        value: 0,
        min: 0,
        max: 100,
        slide: function( event, ui ) {
            jQuery( "#amount1" ).val(ui.value + "%" );
        }
});
于 2012-04-10T01:42:30.607 に答える