javascript - JQuery Mobile slider 字符串而不是数字

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
});

此 slider 带有一个输入字段，其中显示 slider 的当前值，例如 1,2,3,4,5。我想要字符串而不是数字，例如:1 = 不好，2 = 好，3 = 更好......我用 onChange 事件尝试过，但不起作用。

我希望这里有人能帮忙？

Answer 1

尝试:

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 slider 从来都不喜欢在框架中