0

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

問題：最初のスライダーが3ステップずつ変化するため、2番目のスライダーは1ステップでデクリメントする必要があります

2番目のスライダーの変更を調べたところ、最初のスライダーが最初に変更されたときに機能するかのように、その後2番目のスライダーは新しい値を登録しません。

また、最初のスライダーを大きく引くと、2番目のスライダーがランダムにジャンプします。

これは私の問題の単純化されたバージョンです。実際には、同様の方法で相互に影響を与える4つのスライダーがあります（1つのスライダーが3ずつ増加し、次に他の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 Linkを参照してください。jsfiddle コードを変更しましたが、動作するようになりました。チェックしてください。22 行目の変更:

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