关于jQuery mobile <input type =“range”/>

时间:2016-12-21 06:15:18

标签: javascript jquery-mobile

我使用jqm来创建输入标记,就像这样

<input type="range" min="1" max="40" value="1" step="0.1" autocomplete="off"/>

我写了javascript代码

$('.ui-slider-handle').click(function(){
    var pix = parseFloat($(this).attr("title"));
    console.log(pix);
});

在PC上没有问题,但在移动设备上没有问题,所以我改变了我的代码 像这样

$('.ui-slider-handle').on("tap",function(){ var pix = parseFloat($(this).attr("title")); console.log(pix); });

它仍然不起作用!

THX!

1 个答案:

答案 0 :(得分:1)

试试这个:

HTML:

<div data-role="page" id="page-1">
  <div data-role="header">
      <h4>Slider</h4>
  </div>
  <div data-role="main" class="ui-content">
      <label for="slider">Slider</label>
      <input type="range" name="slider" id="slider" min="1" max="40" value="1" step="0.1" autocomplete="off" />
      slidestart: <input type="text" id="txt1">
      slidechange: <input type="text" id="txt2">
      slidestop: <input type="text" id="txt3">
  </div>
</div>

JavaScript的:

$(document).on("pagecreate", "#page-1", 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);
  });
});

小提琴:https://fiddle.jshell.net/8js4npso/