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

Question

http://jsfiddle.net/ntSrb/4/

问题：第二个滑块应该以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链接。我已经更改了你的jsfiddle代码，现在它可以工作了。请检查。第22行更改：

change: function(event, ui){