Question

我正在尝试在JQuery UI中为滑块上的slide和change事件同时更新多个滑块。

我的代码如下：

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

这成功地将所有slider类转换为滑块。但是，每当我移动滑块时，都会出现以下错误：

未捕获RangeError：超出最大调用堆栈大小

我还尝试了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"));
};

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

修改
我只在页面上有三个元素slider，如果有所不同的话。

Answer 1

尝试修改该处理程序：

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

现在，这可能会导致您的代码出现一些其他问题，但是通过检查null“originalEvent”属性，您可以判断由于程序化而调用“更改”处理程序的时间更新。这将使你从该功能所做的所有更新都引起进一步变化的风暴。

Here是jsfiddle。

JQuery UI Reactive Sliders（在滑块更改时同时更新多个滑块）

1 个答案: