JQuery Mobile 滑块字符串而不是数字答案

【问题标题】：JQuery Mobile slider string instead of numberJQuery Mobile 滑块字符串而不是数字
【发布时间】：2013-08-27 14:14:24
【问题描述】：

我已经在我的应用程序中实现了一个 jQuery Mobile 滑块。这是代码

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

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

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

希望这里有人可以帮忙？

【问题讨论】：

请发布您的 JavaScript。
请和一个 jsfiddle :)
没有JS。 ;) jqm 可以解决问题...
@m1crdy 你可以像我刚刚检查过的帖子一样调用插件

标签： javascript jquery jquery-mobile jquery-mobile-slider

【解决方案1】：

尝试：

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

【讨论】：

我认为这是 jQuery UI 调用。你的意思是我需要输入 id="slider" 吗？您的代码对我当前的标记没有影响:(
@m1crdy 自己想一想......显然你必须更改 id。我已经进行了编辑。是UI调用，你不想用？
是的，我当然必须编辑 ID。我会编辑我的帖子，但它不起作用。
@m1crdy 看起来像 input type="range" 搞砸了。
哦。我的项目中没有包含 Jquery UI。老实说，我不想包括它。 JQUI 对我的应用程序来说太重了。只有JQM没有解决方案吗？感谢您的帮助！

【解决方案2】：

我用以下代码解决了这个问题：

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

                    });

【讨论】：