我正在尝试在 JQuery UI 中的 slider 的 slide
和 change
事件上同时更新多个 slider 。
我有如下代码:
$(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
类的东西都变成了 slider 。但是,每当我移动 slider 时,都会出现以下错误:
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"));
};
问题:
如何避免最大调用堆栈大小错误?我希望所有 slider 同时更新。
编辑:
我在页面上只有三个元素带有 slider
类,如果这有区别的话。
最佳答案
尝试修改该处理程序:
function updateSliders(event, ui) {
if (!event.originalEvent) return;
var activeSlider = this;
$(".slider").slider("value", $(activeSlider).slider("value"));
};
现在这可能会导致您的代码出现一些其他问题,我猜,但是通过检查空的“originalEvent”属性,您可以判断何时由于程序化调用了“更改”处理程序更新。这将使您从该函数所做的所有更新不会引起进一步更改的 Storm 。
Here是 jsfiddle。
关于javascript - JQuery UI 响应式(Reactive) slider (在 slider 更改时同时更新多个 slider ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7379363/