動態調用JQuery Slider並沒有正確更新它的值

-1

我第一次調用container.slider（...）時只是獲得了正確的外觀。我如何解決它？動態調用JQuery Slider並沒有正確更新它的值

更新 - 很明顯，演示是一個快速黑客再現問題，讓我們不選擇使用全球變量等，除非它涉及到問題。

攝製（按幾次按鈕）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html style="height: 100%;"> 
<head> 
    <title></title> 
    <link href="styles/themes/ui-lightness/jquery-ui-1.9.0.custom.min.css" rel="stylesheet" 
     type="text/css" /> 
    <script src="scripts/external/jquery-1.8.2.min.js" type="text/javascript"></script> 
    <script src="scripts/external/jquery-ui-1.9.0.custom.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 

     $(document).ready(function() { 
      // 
      var longValues = [10, 50, 90]; 
      var shortValues = [50]; 
      var mode; 

      function setLong() { 
       $("#c").slider({ orientation: "horizontal", range: false, values: longValues, min: 0, max: 100, step: 1 }); 
       mode = "long"; 
      } 

      function setShort() { 
       $("#c").slider({ orientation: "horizontal", range: false, values: shortValues, min: 0, max: 100, step: 1 }); 
       mode = "short"; 
      } 


      $("#t").on("click", function() { 


       if (mode == "long") { 
        console.log("set short"); 
        setShort(); 

       } 
       else { 
        console.log("set long"); 
        setLong(); 
       } 
      }); 

      setLong(); 

     }); 
    </script> 
</head> 
<body style="height: 100%;"> 

    <div id="c" style="width: 200px; vertical-align: middle;"> 
    </div> 

    <button id="t">Toggle 
    </button> 
</body> 
</html>

來源

2013-02-22 user1514042

你是不是想添加和刪除兩個把手的點擊按鈕時？ – adeneo 2013-02-22 15:27:04

不，我想在同一個容器中渲染不同的滑塊。 – user1514042 2013-02-22 15:31:46

好吧，這裏是你怎麼做 - > [** FIDDLE **]（http://jsfiddle.net/qAweP/）... – adeneo 2013-02-22 15:33:21

當改變句柄數，似乎老手柄不會被刪除，並以「重置」滑塊，你可能必須先摧毀它：

function setLong() { 
    $("#c").slider("destroy"); 
    $("#c").slider({ orientation: "horizontal", 
          range: false, 
          values: longValues, 
          min: 0, 
          max: 100, 
          step: 1 
    }); 
    mode = "long"; 
}

這似乎是工作，但有可能是這樣的銷燬和初始化滑塊的問題，並且它沒有經過適當的測試或者其他任何東西。

FIDDLE

來源

2013-02-22 15:44:57 adeneo

誰可以thunk「破壞」是不是從滑塊（）內調用？當然，只要你調用slider（），你想得到一個全新的滑塊，而不是前一個的變種版本...... – user1514042 2013-02-22 15:58:10

你會認爲它的工作原理就是這樣，而且你真的得到一個新的滑塊，但這只是幾個元素被追加，舊的元素不會被刪除，這就是爲什麼當你需要一個新的滑塊在同一個元素上時你需要調用destroy。你也可以通過調用'$（element）.slider（'options'，'min'，100）'來改變滑塊，但是當改變這些值時（嘗試它），它不會刪除舊的手柄。 – adeneo 2013-02-22 16:07:28

這是正確的，但我可能完全改變我的滑塊 - 方向，最小/最大值， - 它更容易通過調用slider（）重新初始化它。爲什麼你會先調用slider（）而不先調用destroy，這就是它讓我:) – user1514042 2013-02-22 16:16:49

-1

嘗試刪除功能setShort（）和setLong（），並從的document.ready範圍和融入全球的變量。

函數和變量僅在執行document.ready處理程序期間存在。在匿名函數執行之後，裏面的任何變量和函數都不再存在。通過將變量和函數移到document.ready匿名函數之外，它們將無限期地存在。

來源

2013-02-22 15:22:53

什麼是廢話，我的朋友。 – user1514042 2013-02-22 15:56:01

動態調用JQuery Slider並沒有正確更新它的值

回答

相關問題