Question

我正在使用Jquerymobile。我有一个滑块和一个对应的文本框。当我们按照我们定义的范围移动滑块时，默认功能会在文本字段中显示给定值。但我想显示文字而不是数字。这更像是严重性问题。即：当滑块值变为30时，它应在文本框中显示“less sever”，当它达到50时，文本应更改为“more sever”。

我已经完成了所有R＆amp; D但无法找到任何东西。为我提供解决方案。

由于

Answer 1

@Jeemusu的解决方案在所有情况下都不适合我... 因此，我使用this info修改了它：

<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>

请参阅working example here

Answer 2

您应该做的就是查找jQuery Mobile创建的锚点（用于滑块），然后将tap事件绑定到它。在tap事件中，您可以使用条件语句检查值，并将它们输出到页面，如下所示：

$(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/

如何在JQM中更改关于滑块的文本标签？

2 个答案: