2

我已经举了这个例子，并在上面添加了 5 个滑块。

示例：http : //jsfiddle.net/redsunsoft/caPAb/2/
我的示例：http: //jsfiddle.net/9azJG/

    var sliders = $("#sliders .slider");
    var availableTotal = 100;

    sliders.each(function() {
        var init_value = parseInt($(this).text());

        $(this).siblings('.value').text(init_value);

        $(this).empty().slider({
            value: init_value,
            min: 0,
            max: availableTotal,
            range: "max",
            step: 2,
            animate: 0,
            slide: function(event, ui) {

                // Update display to current value
                $(this).siblings('.value').text(ui.value);

                // Get current total
                var total = 0;

                sliders.not(this).each(function() {
                    total += $(this).slider("option", "value");
                });

                // Need to do this because apparently jQ UI
                // does not update value until this event completes
                total += ui.value;

                var delta = availableTotal - total;

                // Update each slider
                sliders.not(this).each(function() {
                    var t = $(this),
                        value = t.slider("option", "value");

                    var new_value = value + (delta/2);

                    if (new_value < 0 || ui.value == 100) 
                        new_value = 0;
                    if (new_value > 100) 
                        new_value = 100;

                    t.siblings('.value').text(new_value);
                    t.slider('value', new_value);
                });
            }
        });
    });

当存在五个滑块时，每次拖动滑块时，jQuery 滑块都会以一种奇怪的方式做出反应。似乎目标滑块的值在每一步都变为零并返回到原始值。

有谁知道是什么导致了这个问题？我一直在寻找几个小时没有任何想法。

4

1 回答 1

3

delta/n其中n = {主滑块下的滑块数}

var new_value = value + (delta/4);

演示

于 2013-06-23T20:55:51.770 回答