如何根据JQM中的滑块更改文本标签？

Question

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

我已经完成了所有R & D但找不到任何东西。为我提供解决方案。

感谢

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

Answer 2

@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