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滑块从来没有真正喜欢的一帧