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

Question

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

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 创建的锚点（用于滑块），然后将点击事件绑定到它。在点击事件中，您可以使用条件语句检查值并将它们输出到页面，如下所示：

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