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);
                });
            }
        });
    });

5 つのスライダーが存在する場合、jQuery スライダーは、スライダーがドラッグされるたびに奇妙な反応を示します。ターゲット スライダーの値がゼロになり、各ステップで元の値に戻るようです。

この問題の原因を知っている人はいますか? 私は何も考えずに何時間も探していました。

4

1 に答える 1

3

delta/nここで、n = {メイン スライダーの下にあるスライダーの数}

var new_value = value + (delta/4);

デモ

于 2013-06-23T20:55:51.770 に答える