javascript - 相互接続されたJquery複数のスライダー

Question

相互接続された 3 つの jquery ui スライダーを設定しようとしています。3 つのスライダーの合計は常に 100 のままでなければならないため、1 つのスライダーの値を変更すると、他のスライダーを更新する必要があります。

たとえば、1 つのスライダーの値が 40 で、この値を 50 に上げた場合、他の 2 つのスライダーの値を 5 減らす必要があります。

誰でも私を助けてもらえますか？ありがとう'

Answer 1

いずれの場合も高い値の確率は50です...したがって、3つのスライダーすべてを0から50に設定します...そしてそれらのクラスをclass="selectorinactive"として設定します

$(".selector").slide(function(event, ui){

    $(event.srcElement).removeClass('inactive');

    var valuechange = 0;

    $('.inactive').each(function(value, item){
       // get sum of other two sliders
       valuechange += $(item).slider( "option", "value");
    });

    // subtract sum(othertwo) + this value with 100 to get current changed value
    valuechange = (valuechange + (ui.values[0])) - 100;

    $('.inactive').each(function(value, item){
          // add other sliders values to changedvalue / 2
          $(item).slider( "option", "value", $(item).slider( "option", "value") + (( valuechange / 2) * -1));
    });

    $(event.srcElement).toggleClass('inactive');
});

これがあなたの問題を解決したことを願っています