Question

我有三个按钮，它们应设置一组滑块的值和滑块值输出的文本字段。但是，该功能仅更改其中一个滑块。

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

Answer 1

原因是slide事件不是由值/选项方法触发的，而是仅在您与滑块本身交互时触发。

Doc：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/

设置多个滑块值和链接的文本字段

1 个答案: