2011-03-24 59 views
0

我正在使用JQuery滑塊UI小部件。當在同一表單中使用兩個滑塊時,我會遇到奇怪的問題。我試着只使用幻燈片選項。這會創建一個可以拖動到最後的滑塊,但滑塊的值小於滑塊的全部值。滑動滑塊的速度越快,此問題就越明顯。滑塊不會正確更新

然後我添加了一個更改選項。與幻燈片功能相同的功能。這解決了我的第一個問題。但是現在每當我滑動到一個值時,當我釋放時,值就會增加或減少1.我無法解釋這一點。代碼如下。

$(function() { 
$("#minTixSlider, #minPriceSlider" ).slider({ 
     value:0, 
     min:0, 
     max: 100, 
     step: 1, 
     slide: function() { 
      $("#minTix").val($("#minTixSlider").slider("value")); 
      $("#minPrice").val($("#minPriceSlider").slider("value"));     
     }, 
     change: function() { 
      $("#minTix").val($("#minTixSlider").slider("value")); 
      $("#minPrice").val($("#minPriceSlider").slider("value"));     
     } 

    }); 

$("#minTix").val($("#minTixSlider").slider("value")); 
$("#minPrice").val($("#minPriceSlider").slider("value"));  

}); 

回答

0

使用此問題的答案question。這是我更新的代碼。

function updateInputs() { 
    $("#minTix").val($("#minTixSlider").slider("value")); 
    $("#minPrice").val($("#minPriceSlider").slider("value")); 
} 
$(function() { 
$("#minTixSlider, #minPriceSlider" ).slider({ 
     value:0, 
     min:0, 
     max: 100, 
     slide: function(event, ui){ 
      setTimeout(updateInputs, 10);}, 
     change: function(event, ui){ 
      setTimeout(updateInputs, 10);} 
    }); 

$("#minTix").val($("#minTixSlider").slider("value")); 
$("#minPrice").val($("#minPriceSlider").slider("value"));  

}); 
0

您是否嘗試完全刪除step: 1,行?

按照jquery doc定義的步驟說: 「step:在動畫的每個步驟之後調用的函數」。這可能是額外跳躍發生的地方。

+0

步驟 - 確定每個間隔的大小或數量或滑塊在最小值和最大值之間執行的步驟。滑塊的完整指定值範圍(最大 - 最小)需要被該步驟均勻分割。 代碼示例 使用指定的步驟選項初始化滑塊。 $(「.selector」).slider({step:5}); 在init之後獲取或設置步驟選項。 // getter var step = $(「.selector」).slider(「option」,「step」); // setter $(「.selector」).slider(「option」,「step」,5); 其他小部件可能有所不同。 – Lumpy 2011-03-24 16:28:05