jQuery Mobile：範囲の変更イベントを取得する方法Slider？

私がしようとしているのは、コードのようなものです。値が10より大きい場合、表示が10より大きい場合、または1から10を表示する場合は正常です。ただし、jqueryモバイルのコメントを外すと、もう動作しません。jQuery Mobile：範囲の変更イベントを取得する方法Slider？

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
<!--<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>--> 

</head> 
<body> 
<form> 
<label for='range'>as</label> 
<input id='range' type='range' onmousemove='test()'> 
<p id='display'>display</p> 
</form> 
<script> 
function test(){ 
    var v = $('#range').val(); 
    if(v <= 10)$("#display").text('1-10'); 
    else $("#display").text('>10'); 
} 
</script> 
</body> 
</html>

出典

2017-06-13 user7873949

あなたが見ているコンソール内の任意の特定のエラー：以下は、JQMスライダーをテストすることができ、簡単なスタブがありますか？ –

それを試して、私のためにうまくいく？実際には何が問題なのですか？ –

＃7 .itの行のコメントを外した場合は、それ以上は機能しません – user7873949

ウィジェットの初期化後に使用可能な3つのJQMスライダーのイベントがあります。

slidestart
変更
slidestop

は、

正しい動作を得るには、正しいJQMページ構造を指定し、pagecreateイベント内にイベントハンドラを登録する必要があります。

$(document).on("pagecreate", "#page-one", function() { 
 
    $("#slider").on("slidestart", function() { 
 
    var val = $(this).val(); 
 
    $("#txt1").val(val); 
 
    }); 
 
    $("#slider").on("change", function() { 
 
    var val = $(this).val(); 
 
    $("#txt2").val(val); 
 
    }); 
 
    $("#slider").on("slidestop", function() { 
 
    var val = $(this).val(); 
 
    $("#txt3").val(val); 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> 
 
</head> 
 
<body> 
 
    <div id="page-one" data-role="page"> 
 
    <div role="main" class="ui-content"> 
 
     <label for="slider">Slider</label> 
 
     <input type="range" name="slider" id="slider" min="1" max="100" value="1" step="1" autocomplete="off" /> 
 
     <fieldset class="ui-grid-b"> 
 
      <div class="ui-block-a"> 
 
      <label for="txt1">slidestart:</label> 
 
      <input data-mini="true" name="txt1" id="txt1" value="" type="text"> 
 
      </div> 
 
      <div class="ui-block-b"> 
 
      <label for="txt2">slidechange:</label> 
 
      <input data-mini="true" name="txt2" id="txt2" value="" type="text"> 
 
      </div> 
 
      <div class="ui-block-c"> 
 
      <label for="txt3">slidestop:</label> 
 
      <input data-mini="true" name="txt3" id="txt3" value="" type="text"> 
 
      </div> 
 
     </fieldset> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-06-13 10:47:11 deblocker

私はあなたがdiv内inputをラップし、あなたがsliderの値を取得することができ、それを通してその特定divにchangeイベントを添付することをお勧め。以下の作業スニペット。

$("#slider").change(function() { 
 
    $("#display").text($('#range').val()<=10?'1-10':'>10'); 
 
});

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
<form> 
 
    <div id="slider"> 
 
    <label for='range'>as</label> 
 

 
    <input id='range' type='range' min="0" max="100" value="0"> 
 
    </div> 
 
    <p id='display'>display</p> 
 
</form>

出典

2017-06-13 08:13:54

どうもありがとう！それはすばらしい解決策です。私はまだjqueryをインクルードした後に動作しない理由が不思議です。 jquery mobileはデフォルトイベントをjqueryから変更しましたか？ – user7873949

'jquery mobile'は独自のバージョンの要素をUIや他のものが正しく動作するように追加することができます。デフォルトのinput要素を隠し、' divs'や 'span 'などで新しいコントロールをレンダリングします。プラグインは同じことをするでしょう..それで、デフォルトのものが動作しないかもしれません。:) –

@GuruprasadRao：質問がJQM – deblocker

jQuery Mobile：範囲の変更イベントを取得する方法Slider？

答えて

関連する問題