1

アプリに 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
});

このスライダーには、スライダーの現在の値 (1、2、3、4、5 など) が表示される入力フィールドがあります。数値の代わりに文字列が必要です: 1 = 悪い、2 = 大丈夫、3 = 良い... onChange イベントで試しましたが、うまくいきません。

ここの誰かが助けてくれることを願っていますか？

4

2 に答える 2

0

次のコードでこれを解決しました。

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

                    });
于 2013-09-09T10:30:27.213 に答える
0

で試してください：

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 モバイル API と jqUI の間で競合が発生します

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

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

JQuery UI スライダーがフレーム内にあることをあまり好まないことに注意してください。

于 2013-08-27T14:23:32.597 に答える