Question

问题：第二个滑块应以1为步长递减，因为第一个滑块的步长为3

我检查过第二个滑块的变化，就好像第一个滑块第一次更改它的工作原理，之后第二个滑块只是没有注册新值

如果您将第一个滑块拉大一步，第二个滑块也会随机跳转。

这是我的问题的简化版本，因为实际上我有4个滑块会以类似的方式影响彼此（一个滑块增加3，然后其他三个滑块减1）

HTML

<span id="firstspan">25</span>
<div id="firstrange" style="max-width: 300px;"></div>
<span id="secondspan">25</span>
<div id="secondrange" style="max-width: 300px;"></div>

JS

function updateSpans(numberChange) {

    var oldval;
    var newval;

    oldval = $("#secondrange").slider("value"); //number                 
    newval = Math.round(oldval + numberChange / 3);

    $('#secondrange').slider("option", "step", 1);
    $("#secondrange").slider("option", "value", newval);
    $('#secondrange').slider("option", "step", 3);
    $("#secondspan").text(newval);
}

$(function () {
    $("#firstrange").slider({
        orientation: "horizontal",
        min: 0,
        max: 100,
        value: 25,
        step: 3,
        slide: function (event, ui) {
            var currentvalue = ui.value; //number
            var oldvalue = parseInt($('#firstspan').text()); //number
            $("#firstspan").text(currentvalue);
            updateSpans(oldvalue - currentvalue);
        },
    });
});

$(function () {
    $("#secondrange").slider({
        orientation: "horizontal",
        min: 0,
        max: 100,
        value: 25,
        step: 3,
    });
});

Answer 1

请参阅此jsFiddle Link。我已经更改了你的jsfiddle代码，现在它可以工作了。请检查。第22行的变化：

change: function(event, ui){

更改步骤时，jQuery滑块不会正确更改值

1 个答案: