2

Jquerymobile を使用しています。それに対応するスライダーとテキストボックスがあります。デフォルトの機能が与えられているので、定義した範囲に従ってスライダーを動かすと、テキスト フィールドに値が表示されます。しかし、数字の代わりにテキストを表示したい。それは重大度の問題に似ています。つまり、スライダーの値が 30 になると、テキスト ボックスに「少ないサーバー」と表示され、50 に達するとテキストが「多いサーバー」に変わります。

4

2 に答える 2

2

@Jeemusuのソリューションは、すべての場合に機能するわけではありませんでした...したがって、この情報を使用して変更しました：

<script>
$(document).bind('pageinit', function () {
  //depending on the device we have a touch or a mouse event
  var supportTouch = jQuery.support.touch,
      touchStartEvent = supportTouch ? "touchstart" : "mousedown",
      touchStopEvent  = supportTouch ? "touchend"   : "mouseup",
      touchMoveEvent  = supportTouch ? "touchmove"  : "mousemove";

  //the event is bound to the .ui-slider inside of the input type range
  $('#slider-a').siblings('.ui-slider').bind(touchStopEvent,function(){
    var sliderVal = $("#slider-a").attr('value');

    if(sliderVal <= 30) {
      $('#slider-phrase').html('normal');
    } else if(sliderVal >= 30 && sliderVal < 50) {
      $('#slider-phrase').html('less severe');
    } else if(sliderVal >= 50) {
      $('#slider-phrase').html('more severe');
    }
  });
});
</script>

こちらの実例をご覧ください

于 2012-11-20T21:45:26.127 に答える
1

jQuery Mobile によって作成されたアンカー (スライダーに使用される) を探し、それにタップ イベントをバインドするだけです。タップ イベントでは、条件ステートメントを使用して値を確認し、次のようにページに出力できます。

$(document).ready(function() {

var sliderAnchor = $("#slider-a").closest('div').children('div').children('a');

  sliderAnchor.bind('tap',function(e){

    var sliderVal = $("#slider-a").attr('value');

    if(sliderVal <= 30) {
       $('#slider-phrase').html('normal');
    } else if(sliderVal >= 30 && sliderVal < 50) {
       $('#slider-phrase').html('less severe');
    } else if(sliderVal >= 50) {
       $('#slider-phrase').html('more severe');
    }

  });

});

実際の例: http://jsbin.com/igugac/1/

于 2012-11-20T09:54:06.313 に答える