JQuery UI反應滑塊（在更改滑塊時同時更新多個滑塊）

我試圖在JQuery UI中的滑塊的slide和change事件上同時更新多個滑塊。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; 
    }); 
});

這成功地轉用一切一類的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，如果有差別。

來源

2011-09-11 user1834646

嘗試修改該處理程序：

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

現在，可能會導致某些其他問題與您的代碼，我猜，但通過檢查空「originalEvent」屬性，你可以告訴當你的「變」處理程序由於程序更新而被調用。這將保持你從這個功能所做的所有更新，從而引發進一步變化的風暴。

Here是jsfiddle。

來源

2011-09-11 16:05:37 Pointy

非常好！我還發現'$（activeSlider）.slider（「value」）'可以優化爲'ui.value'。 – user1834646

如果你不介意，你能解釋一下'！event.originalEvent'嗎？這似乎是違反直覺的，就像說「如果這不是原始事件，那麼返回」。 – user1834646

從jQuery獲得的「event」對象不是當事件發生時瀏覽器創建的「真實」事件對象。這是一個包裝。該包裝器對象的「originalEvent」屬性使您可以訪問本機瀏覽器事件。如果沒有這樣的本地事件，那麼可以推斷出由於對滑塊進行程序化更新（即，用JavaScript設置滑塊的「值」）而調用「更改」處理程序。合理？ – Pointy

JQuery UI反應滑塊（在更改滑塊時同時更新多個滑塊）

回答

相關問題