0

基本的なスライダー。10〜1000の範囲で、各ステップの間に20があります（10-30-50など）。

私がやりたいのは、最後のステップ（1000）の値の前に文字を追加/挿入することです。

「560kr/h」または「400kr/h」として返されるわけではありませんが、それはすべて問題ありません。しかし、1000になると、「1000kr/h」になりたいです。

以下は私の設定です。

HTML

<label for="value1" class="value">Mitt pris:</label>
<input type="text" id="value1" />kr/h
<div id="slider1"></div>

jQuery

$(function() {
    $( "#slider1" ).slider({
        value: 300,
        min: 10,
        max: 1000,
        step: 20,
        slide: function( event, ui ) {
            $( "#value1" ).val(ui.value );}
    });
        $( "#value1" ).val( $( "#slider1" ).slider( "value" ) );

});
4

2 に答える 2

1

他の方法もありますがif、値を設定した後の簡単なステートメントで十分です。

    slide: function( event, ui ) {
        $( "#value1" ).val(ui.value );
        if ($( "#value1" ).val == 1000) { $( "value1" ).val(">1000");} }

これはより簡潔な方法ですが、読みにくい可能性があります

    slide: function( event, ui ) {
        $( "#value1" ).val(ui.value == 1000 ? ">1000" : ui.value );}

このセッターを実際に関数にするのは良い設計なので、設定する両方の場所で使用できますvalue1。

$(function() {
    var setValue = function(value) {
        $("#value1").val(value == 1000 ? ">1000" : value); };
    $( "#slider1" ).slider({
        value: 300,
        min: 10,
        max: 1000,
        step: 20,
        slide: function( event, ui ) {
            setValue(ui.value);}
    });
    setValue($( "#slider1" ).slider( "value" ) );
});
于 2013-03-08T16:36:03.490 に答える
0

試す：

$(function() {
    $( "#slider1" ).slider({
        value: 300,
        min: 10,
        max: 1000,
        step: 20,
        slide: function( event, ui ) {             
            $( "#value1" ).val(ui.value == 1000 ? '> 1000' : ui.value );
        }
    });
    $( "#value1" ).val( $( "#slider1" ).slider( "value" ) );
});

これがフィドルです

于 2013-03-08T16:36:33.087 に答える