1

スライダーのグループの値を設定する 3 つのボタンと、スライダー値出力のテキスト フィールドを取得しました。ただし、この関数はスライダーの 1 つだけを変更します。

参照: http://jsfiddle.net/josepha/anb9G/

//slider
$("#slider-design").slider({
    range: "min",
    value: 2,
    min: 1,
    max: 5,
    slide: function (event, ui) {
        $("#amount-design").val(ui.value);
    }
});
$("#amount-design").val($("#slider-design").slider("value"));

$("#slider-pages").slider({
    range: "min",
    value: 5,
    min: 1,
    max: 10,
    slide: function (event, ui) {
        $("#amount-pages").val(ui.value);
    }
});
$("#amount-pages").val($("#slider-pages").slider("value"));

$("#slider-hours").slider({
    range: "min",
    value: 5,
    min: 0,
    max: 10,
    slide: function (event, ui) {
        $("#amount-hours").val(ui.value);
    }
});
$("#amount-hours").val($("#slider-hours").slider("value"));

$("#preset-small").click(function () {
    $("#slider-pages").slider("value", 5);
    $("#slider-design").slider("value", 1);
    $("#slider-hours").slider("value", 5);
});
4

1 に答える 1

0

その理由は、slideイベントが値/オプション メソッドによってトリガーされるのではなく、スライダー自体を操作したときにのみトリガーされるためです。

ドキュメント: http://wiki.jqueryui.com/w/page/12138059/Slider#specs

change値/オプションセットでもトリガーされるイベントを使用して変更できます。

コード：

//slider
$("#slider-design").slider({
    range: "min",
    value: 2,
    min: 1,
    max: 5,
    change: function (event, ui) {
        $("#amount-design").val(ui.value);
    }
});
$("#amount-design").val($("#slider-design").slider("value"));

$("#slider-pages").slider({
    range: "min",
    value: 5,
    min: 1,
    max: 10,
    change: function (event, ui) {
        $("#amount-pages").val(ui.value);
    }
});
$("#amount-pages").val($("#slider-pages").slider("value"));

$("#slider-hours").slider({
    range: "min",
    value: 5,
    min: 0,
    max: 10,
    change: function (event, ui) {
        $("#amount-hours").val(ui.value);
    }
});
$("#amount-hours").val($("#slider-hours").slider("value"));

作業フィドル: http://jsfiddle.net/anb9G/1/

于 2013-07-10T16:45:45.860 に答える