Jquery mobile 如何同步滑块'；价值观

我使用jquery移动滑块：

关
在…上

它应该以以下方式工作：

如果触摸开关1，则滑块1的值应设置为0或255

如果更改了slider1的值，则（a）如果该值=0，则应将switcher1设置为0，（b）否则应将switcher1的值设置为255

我已尝试使用

change

事件来执行此操作（同样用于

switcher1

change（）

）：

var滑块1\u val=“0”；
$（'#slider1'）。更改（函数（）{
sVal=$（this.val（）；
如果（滑块1_val！==sVal）{
$（“#slider1”）.val（sVal）.slider（“刷新”）；
如果（sVal==0）{
$（“#切换器1”）.val（0）.slider（“刷新”）；
}否则{
$（“#切换器1”）.val（255）.slider（“刷新”）；
}
滑块1_val=sVal；
}
});

但是看起来像是

refresh

调用

change

事件，所以我得到了无限循环

它应该以以下方式工作：

如果触摸开关1，则滑块1的值应设置为0或255

如果更改了slider1的值，则（a）如果该值=0，则应将switcher1设置为0，（b）否则应将switcher1的值设置为255 我已尝试使用change event（同样用于switcher1 change（））：

对于更改每个控件，您有两个非常不同的标准，这一事实应该提示您更改事件处理程序也应该不同。使用相同的处理程序会导致您正在经历的无限循环。下面的代码说明了您提供的严格更改标准。请注意，slider1更改处理程序仅在需要更改时（根据您的条件）才会更改switcher1，而不是每次调用它时。另外，请注意，在slider1更改处理程序中，

switcher1_val

是在调用refresh之前设置的，因此如果

slider（'refresh'）

确实调用了更改处理程序，则更改处理程序将不会执行任何操作，因为

switcher1_val

已经更新

var linkSliders = function(sliderId, switcherId){
    var slider = $('#'+sliderId),
        switcher = $('#'+switcherId);
    var min = Math.min(switcher[0].options[0].value, switcher[0].options[1].value),
        max = Math.max(switcher[0].options[0].value, switcher[0].options[1].value);
    var sliderVal = switcherVal = min;

    // set the slider min/max to be the same as the switcher's, just in case they're different
    slider.attr('max', max).attr('min', min).slider('refresh');  
    slider.change(function(){
        var sVal = $(this).val();
        if(sliderVal != sVal){
            if( sVal == min && switcherVal!=min){
                switcherVal=min;
                switcher.val(min).slider('refresh');
            }else if(sVal>min && switcherVal!=max){
                switcherVal=max;
                switcher.val(max).slider('refresh');
            }
            sliderVal = sVal;
        }
    });  

    switcher.change(function(){
        var sVal = $(this).val();
        if(switcherVal != sVal){
            slider.val(sVal).slider('refresh');
            switcherVal = sVal;
        }
    });
};

linkSliders('slider1','switcher1');

希望这有帮助

---

---

更新：根据要求，对示例进行了修改，使其更加通用

如果去掉

$（“#slider1”）.val（sVal）.slider（“刷新”）。看起来您正在将该值设置为其已设置的值，这是不必要的，并导致更改事件触发。谢谢！它工作得很好。你能帮我把它变得更普遍吗？假设我有4个页面，每个页面都包含切换器和滑块（即，第1页包含切换器1和滑块1，第2页包含切换器2和滑块2，依此类推）。另外，我想知道是否可以使用
$（'.ui slider handle'）.live（'touchend'
）而不是
$（'#switcher1'）。更改（
。这不是更有效吗？我已经更新了示例，使其更通用：。非常感谢！它工作得很好，但在我的情况下不是；）-我在第1页上有一个滑块和一个切换器，在第2页上有一个滑块和一个切换器，依此类推，我遇到了错误-
未捕获异常：在初始化之前无法调用滑块上的方法；当我调用
链接滑块（“滑块2”，“切换器2”）时，尝试调用方法“刷新”
）
。我们需要查看您的页面结构、代码所在的位置以及调用代码的时间，以便正确地解决此错误。您是否可以发布完整的html/js，无论是在小提琴中还是作为原始Q的更新。看起来它不起作用，因为我们没有保留每个切换器和滑块的当前值。。。