2

我正在尝试链接两个 jQuery UI 滑块，以便它们加起来达到 100%。我在 SO 上找到了三个滑块的完美解决方案，但由于某种原因，在修改此 jsFiddle 示例以去除第三个滑块时，我无法正确计算数学：http: //jsfiddle.net/gWbMp /3/

谁能帮我把这个分叉只包括两个滑块而不是三个？

这是我最终得到的（关闭）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

我认为这对于两个滑块可以做得更短

您可以重写 refreshSliders 函数以根据最大值计算第二个值并直接在滑块“更改”和“滑动”（甚至只是第二个）上调用它

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 回答