JQuery Mobile滑塊字符串而不是數字

Question

我在我的應用中實現了一個jQuery Mobile Slider。這是代碼

<input type="range" name="slider-1" id="slider-1" min="1" max="5" value="1"> 
<div id="hint"></div> 

JS

var text = {1 : "bad", 2 : "okay", 3 : "better"}; 
var $sliderText = $('#hint'); 
var refresh = function(e){ 
    $sliderText.text(text[$('#slider-1').slider('value')]); 
}; 

$('#slider-1').slider({ 
     slide: refresh, 
     change: refresh 
}); 

該滑塊配有其中示出滑動件的電流值的輸入欄，e.g 1,2,3,4,5。我想有字符串而不是數字，如：1 =壞，2 =好，3 =更好... 我嘗試了onChange事件，但它不起作用。

我希望這裏有人能幫忙嗎？

Answer 1

我用下面的代碼解決了這個爲：

<input type="range" name="slider-1" id="slider-1" min="1" max="5" value="1"> 
<div id="hint"></div> 

JS：

// Slider Handling 
       $("#slider-1").on('change', function(event) { 
         var val = $("#slider-1").val(); 
         if(val == 1){ 
          $("#hint").empty(); 
          $("#hint").append("beschissen"); 
         }else if(val == 2){ 
          $("#hint").empty(); 
          $("#hint").append("naja"); 
         }else if(val == 3){ 
          $("#hint").empty(); 
          $("#hint").append("passt"); 
         }else if(val == 4){ 
          $("#hint").empty(); 
          $("#hint").append("fett"); 
         }else if(val == 5){ 
          $("#hint").empty(); 
          $("#hint").append("geilo"); 
         } 

        }); 

Answer 2

嘗試：

JS

var text = { 
    1: "bad", 
    2: "okay", 
    3: "better", 
    4: "great", 
    5: "awesome" 
}; 
var $sliderText = $('#hint'); 

var refresh = function (e) { 
    $sliderText.text(text[$('#slider-1').slider('value')]); 
}; 
$(function() { 
    $('#slider-1').slider({ 
     min: 1, 
     max: 5, 
     slide: refresh, 
     change: refresh 
    }); 
    refresh(); 
}); 

HTML

您需要刪除type="range"或將jQuery Mobile的API和jqUI

<div id="slider-1"></div> 
<div id="hint"></div> 

之間的衝突

http://jsfiddle.net/techunter/fKcjy/

注意的JQuery UI滑塊從來沒有真正喜歡的一幀