Jquery UI滑塊不一致

我遇到了這個jQuery UI滑塊沒有正確顯示所選選項的標籤的問題。滑塊（使用下面的當前代碼）首先顯示第一個選項，這是我所期望的，但是在使用滑塊選擇另一個選項之後，返回到第一個選項，而顯示爲第二個數組選項比第一個。Jquery UI滑塊不一致

它也沒有顯示在一個清除滑動的所有選項;相反，它顯示前三個數組字符串，然後停止，然後當您返回一個選項時，它將顯示數組中的第四個和最後一個字符串。在過去的一個小時裏，我一直在玩它，但沒有得到任何解決方案。有什麼辦法可以解決這個問題嗎？

代碼：

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 

<style type="text/css"> 
#slider { 
width: 300px; 
} 
#itemlabel { 
text-align: center; 
} 
</style> 

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
<script type="text/javascript"> 
$(function() { 
    var valMap = [1.5, 2.5, 5.5, 10.5]; 
    $("#slider").slider({ 
     min: 0, 
     max: 3, 
     value: 0, 
     slide: function(event, ui) {       
      $("#amount").val('$' + valMap[$("#slider").slider("value")] + '0');    
     }  
    }); 
    $("#amount").val('$' + valMap[$("#slider").slider("value")] + '0'); 
}); 
</script> 
</head> 
<body> 

<center><div id="planlabel"><p> 
    <label for="amount">Item:</label> 
    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" /> 
</p></div> 
<div id="slider"></div></center>

來源

2013-04-08 Sean Denny

只是改變「滑」到「變」。

$(function() { 
    var valMap = [1.5, 2.5, 5.5, 10.5]; 
    $("#slider").slider({ 
     min: 0, 
     max: 3, 
     value: 0, 
     change: function(event, ui) {       
      $("#amount").val('$' + valMap[$("#slider").slider("value")] + '0'); 
     }  
    }); 
    $("#amount").val('$' + valMap[$("#slider").slider("value")] + '0'); 
});

jsfiddle demo

「變更」回調的滑塊的值改變之後調用，而「滑動」回調被稱爲鼠標移動，但也可以是變化值之前。

雖然滑塊文件沒有說明的話，我相信你可以縮短回調裏面的一行：

$("#amount").val('$' + valMap[ui.value] + '0');

來源

2013-04-08 02:57:33

真棒，謝謝;這正是我一直在尋找的！編輯：感謝縮短的位！ – 2013-04-08 03:06:11

另一種選擇是，如果您希望在滑動時更新，則使用幻燈片回調，但通過'ui.value'獲取值（http://api.jqueryui.com/slider/#event-slide ）。 – 2013-09-10 16:40:48

Jquery UI滑塊不一致

回答

相關問題