2

合計が 100% になるように、2 つの jQuery UI スライダーをリンクしようとしています。ここSOで3つのスライダーの完璧な解決策を見つけましたが、何らかの理由で、このjsFiddleの例を変更して3番目のスライダーを取り除くと、数学を正しく合計することができません: http://jsfiddle.net/gWbMp /3/

3つではなく2つのスライダーを単純に含めるために、これをフォークするのを手伝ってくれる人はいますか?

これが私が最終的に得た（近い）javascriptですが、それはまったく正しくありません：

var min = 0;
var max = 100;
$("input").change(function(){
 console.log("a");
     var index = $(this).attr('class').substring(0,1);
    $("#slider_"+ index).slider('value', this.value);
    refreshSliders( index - 0 );
});
$('.selector').slider({
    animate : true
}, {
    min : min
}, {
    max : max
}, {
    change : function(event, ui) {
        totalvalue = $("#slider_1").slider("value") + $("#slider_2").slider("value");
        $('.1percent').val($("#slider_1").slider("value"));
        $('.2percent').val($("#slider_2").slider("value"));

    }
}, {
    slide : function(event, ui) {
        $('.1percent').val($("#slider_1").slider("value"));
        $('.2percent').val($("#slider_2").slider("value"));

    }
});

$("#slider_1").slider('value', 10);
$("#slider_2").slider('value', 90);

$('.1percent').val($("#slider_1").slider("value"));
$('.2percent').val($("#slider_2").slider("value"));

function refreshSliders(slidermainin) {
    var value1 = $("#slider_1").slider("option", "value");
    var value2 = $("#slider_2").slider("option", "value");
    var valuechange = (value1 + value2) - 100;
    var valuemain = 0, valueother1 = 0;

    switch(slidermainin) {
        case 1:
            slidermain = "#slider_1";
            sliderother1 = "#slider_2";
            valuemain = value1;
            valueother1 = value2;
            break;
        case 2:
            slidermain = "#slider_2";
            sliderother1 = "#slider_1";
            valuemain = value2;
            valueother1 = value1;
            break;
    }

    if (valueother1 === 0) {
        if (valueother1 === 0) {
            if (valuechange <= 0) {
                $(sliderother1).slider('value', valueother1 - (valuechange / 2));
            }
        } else {
            if (valuechange <= 0) {
                $(sliderother1).slider('value', valueother1 - (valuechange / 2));
            } else {
                $(sliderother1).slider('value', valueother1 - valuechange);
            }
        }
    } else {
        $(sliderother1).slider('value', valueother1 - (valuechange / 2));
    }
}

var bindSliders = function(selector, value) {
    $(selector).bind("slidechange slide", function(event, ui) {
        event.originalEvent && (event.originalEvent.type == 'mousemove' || event.originalEvent.type == 'mouseup' || event.originalEvent.type == 'keydown') && refreshSliders(value);
    });
};

bindSliders("#slider_1", 1);
bindSliders("#slider_2", 2);
4

1 に答える 1

2

これは、2つのスライダーの場合、はるかに短くできると思います

最大値に基づいて2番目の値を計算するようにrefreshSliders関数を書き直して、スライダーの「変更」と「スライド」（または2番目のもの）で直接呼び出すことができます

function refreshSliders(thisSlider, ui){    
var thisNum = $(thisSlider).attr("id").replace("slider_", "");
var otherNum = (thisNum==1)?2:1;  
$('.'+thisNum+'percent').val(ui.value);
if ($("#slider_"+otherNum).slider("value")!=max-ui.value){             
      $("#slider_"+otherNum).slider("value", max-ui.value);
      $('.'+otherNum+'percent').val(max-ui.value); 
 }    
}

このjsfiddleを見てください。元のものから分岐し、少し調整しました：http://jsfiddle.net/paulitto/fBxCm/1/

于 2013-04-27T10:37:41.357 に答える