jQuery UI组合滑块百分比

问题描述:

我已经采用了这个例子并添加了5个滑块。

I have taken this example and added 5 sliders on it.

例如: http://jsfiddle.net/redsunsoft/caPAb/2/

我的例子: http://jsfiddle.net/9azJG/

Exemple: http://jsfiddle.net/redsunsoft/caPAb/2/
My Exemple: 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滑块反应奇怪每次拖动滑块时的方式。看起来目标滑块的值变为零并返回到每个步骤的原始值。

When there are five sliders present, the jQuery sliders react in a weird way each time the sliders are dragged. It seems like the value for the target sliders goes to zero and back to the original value on each step.


有谁知道导致此问题的原因是什么?我一直在寻找几个小时没有任何想法。

Would anyone know what causes this issue? I have been searching for hours without any idea.

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

var new_value = value + (delta/4);

DEMO

DEMO