0

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,
    });
});
4

1 回答 1

1

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

change: function(event, ui){
于 2013-03-08T10:48:21.533 回答