javascript-JQuery UI反应性滑块(在更改滑块时同时更新多个滑块)

我正在尝试同时更新幻灯片上的多个滑块,并更改JQuery UI中的滑块事件.

我有如下代码：

$(function() {
    var totalSliders = 0;
    $(".slider").each(function() {
        var value = parseInt($(this).text(), 10);
        $(this).empty().slider({
            value: value,
            range: "min",
            animate: true,
            orientation: "horizontal",
            slide: updateSliders,
            change: updateSliders
        });
        totalSliders++;
    });

    function updateSliders(event, ui) {
        var activeSlider = this;
        $(".slider").slider("value", $(activeSlider).slider("value"));
    };

    $("#update").click(function() {
        $(".slider").slider("value", 10);
        return false;
    });
});

这样可以成功地将所有带有一类滑块的内容转换为滑块.但是,每当移动滑块时,都会出现以下错误：

Uncaught RangeError: Maximum call stack size exceeded

我还尝试了以下updateSliders的实现：

function updateSliders(event, ui) {
    var activeSlider = this;
    $(".slider").not(activeSlider).slider("value", $(activeSlider).slider("value"));
};

以下updateSliders(event,ui)的实现工作正常：

function updateSliders(event, ui) {
    console.log($(this).slider("value"));
};

题：
如何避免最大调用堆栈大小错误？我希望所有滑块同时更新.

编辑：
我在页面上只有三个元素,并带有一类滑块,如果有区别的话.

解决方法:

尝试修改该处理程序：

function updateSliders(event, ui) {
    if (!event.originalEvent) return;
    var activeSlider = this;
    $(".slider").slider("value", $(activeSlider).slider("value"));
};

我猜,这可能会导致代码出现其他问题,但是通过检查空的“ originalEvent”属性,您可以知道由于编程更新而导致何时调用“ change”处理程序.这将使您正在使用该功能进行的所有更新不会引起进一步更改的风暴.

Here是jsfiddle.