如何根據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