Question

我已经采用了这个例子，并在其上添加了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滑块以奇怪的方式作出反应。看起来目标滑块的值变为零并返回到每个步骤的原始值。

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

Answer 1

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

var new_value = value + (delta/4);

<强> DEMO

jQuery UI组合滑块百分比

1 个答案: