jQuery-ui 滑块 - 如何阻止两个滑块相互控制答案

【问题标题】：jQuery-ui slider - How to stop two sliders from controlling each otherjQuery-ui 滑块 - 如何阻止两个滑块相互控制
【发布时间】：2008-11-16 10:14:27
【问题描述】：

这是参考之前问过的question

这里的问题是，每个slider 控制另一个。它会产生反馈。

我怎么可能阻止它？

$(function() {
    $("#slider").slider({ slide: moveSlider2 });
    $("#slider1").slider({ slide: moveSlider1 });
    function moveSlider2( e, ui ) 
    {
        $('#slider1').slider( 'moveTo', Math.round(ui.value) );
    }

    function moveSlider1( e, ui ) 
    {
        $('#slider').slider( 'moveTo', Math.round(ui.value) );
    }
});

【问题讨论】：

标签： javascript jquery jquery-ui slider jquery-ui-slider

【解决方案1】：

这是一种 hack，但有效：

$(function () {
    var slider = $("#slider");
    var slider1 = $("#slider1");
    var sliderHandle = $("#slider").find('.ui-slider-handle');
    var slider1Handle = $("#slider1").find('.ui-slider-handle');

    slider.slider({ slide: moveSlider1 });
    slider1.slider({ slide: moveSlider });

    function moveSlider( e, ui ) {
        sliderHandle.css('left', slider1Handle.css('left'));
    }

    function moveSlider1( e, ui ) {
        slider1Handle.css('left', sliderHandle.css('left'));
    }
});

基本上，您可以通过直接操作 css 来避免反馈，而不是触发幻灯片事件。

【讨论】：

【解决方案2】：

你可以存储一个 var CurrentSlider = 'slider';

在任一滑块上鼠标按下时，您将 CurrentSlider 值设置为该滑块，

在你的 moveSlider(...) 方法中检查这是否是 CurrentSlider，如果不是，你不传播滑动（避免反馈）

【讨论】：

【解决方案3】：

您可以只为您的 moveSlider1 和 moveSlider2 函数提供一个可选参数，当设置为真值时，会抑制递归。

【讨论】：

【解决方案4】：

一种更简单的方法，是上述答案的混合体：

    var s1 = true;
    var s2 = true;
    $('#slider').slider({
        handle: '.slider_handle',
        min: -100,
        max: 100,
        start: function(e, ui) {
        },
        stop: function(e, ui) { 
        },
        slide: function(e, ui) {
            if(s1)
            {
                s2 = false;
                $('#slider1').slider("moveTo", ui.value);
                s2 = true;
            }
        }
    });


    $("#slider1").slider({ 
        min: -100, 
        max: 100,
        start: function(e, ui) {
        },
        stop: function(e, ui) { 
        },
        slide: function(e, ui) {
            if(s2)
            {
                s1 = false;
                $('#slider').slider("moveTo", ui.value);
                s1 = true;
            }
        }
        });

});

【讨论】：

【解决方案5】：

现在试过了，所有答案都不起作用，可能是由于 jquery ui 的变化。

如果更换，Badri 的解决方案会起作用

$('#slider').slider("moveTo", ui.value);

与

$('#slider').slider("option", "value", ui.value);

【讨论】：