How to change slider switch text? [closed]

问题

I have a standard selects switch. And I want to change text of specific option after page is loaded (ready). Value is changed but it is not updated in the browser user interface view. 'refresh' and change() are not helping.

<script type="text/javascript">
    $("#set_slider option[value='0']").text('before') ;
    $("#set_slider").change();

    function clickz() {
        $("#set_slider option[value='0']").text('after') ;
        $("#set_slider").change();
        $("#set_slider").slider('refresh'); 
        $("#txt").html($("#set_slider option[value='0']").text());
    }
</script>

<select name="set_slider" id="set_slider" data-role="slider" data-mini="false" >
    <option value="0" >SET</option>
    <option value="1" >OFF</option>
</select>

<div id=txt></div>
<input type='button' onclick='clickz();' value='Update'/>

this one didn't work as well:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>

<body>
    <div data-role="page" id="page2">
    <div data-role="header"><h1>Header</h1></div>
    <div data-role="content">
        <select name="set_slider" id="set_slider" data-role="slider" data-mini="false" >
            <option value="0" >SET</option>
            <option value="1" >OFF</option>
        </select>
    </div>
      <div id=txt></div>
    <input type='button' onclick='clickz();' value='Update'/>
    <div data-role="footer">
        <h1>Footer</h1>
    </div>
</div>

<script type="text/javascript">
    $(document).delegate('#page2', 'pageshow', function (event, ui) {
        $("#set_slider").change();
        $("#set_slider").slider('refresh'); 
    }); 

    $("#set_slider option[value='0']").text('before');
    function clickz() {
        $("#set_slider option[value='0']").text('after');
        $("#txt").html($("#set_slider option[value='0']").text());
        $.mobile.changePage('#page2');
    }
</script>

</body>
</html>

回答1:

Does something like this work?

http://jsfiddle.net/LgLPu/

$('#set_slider').bind('change', function() {
    var activeLabel  = $('span.ui-slider-label');
    var mySlider     = $(this);
    var text         = mySlider.find('option:selected').text();
    var new_set      = 'Before';
    var new_off      = 'After';

    // changing the text does nothing
    //mySlider.find('option[value="0"]').text(new_set);
    //mySlider.find('option[value="1"]').text(new_off);

    // You need to update the ui-slider-label spans
    if(mySlider.val() == 0) {
        activeLabel.text(new_set);
    } else {
        activeLabel.text(new_off);        
    }

    mySlider.slider( 'refresh' ); // .trigger( 'create' )
});

HTML

<select name="set_slider" id="set_slider" data-role="slider" data-mini="false" >
    <option value="0" >SET</option>
    <option value="1" >OFF</option>
</select>

<!--
This is generated form the slider element:

<span class="ui-slider-label ui-slider-label-a ui-btn-active ui-btn-corner-all" role="img" style="width: 40.173913043478265%; ">OFF</span>
-->

来源：https://stackoverflow.com/questions/11231998/how-to-change-slider-switch-text

标签

jquery

jquery-mobile