如何更改滑块切换文本？

我有一个标准选择开关。我想在页面加载（准备好）后更改特定选项的文本。值已更改，但未在浏览器用户界面视图中更新。 'refresh'和change（）没有帮助。如何更改滑块切换文本？

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

这一个没有工作，以及：

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

来源

2012-06-27 user1464277

@casperOne我不明白为什么这个被封？这是一个有效的问题。 jQM生成Slider HTML，OP只是询问如何更改Slider上的文本，这并不明显。 –

@PhillPafford很难说出OP的尝试。它看起来像一个代码转储和“我该怎么做”，这与“关于作为NARQ在SO上关闭的”gimme teh codez“相同。 – casperOne

@PhillPafford它也是一个转贴和一个副本，OP问了以前的问题，OP标记为“也不起作用”的部分实际上从我发布的一个答案中解除（我还添加了一个工作jsfiddle）。 – Jack

请问像这样的工作？

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

来源

2012-06-27 18:49:05

它可以工作，但是如果你在页面上有一个滑块（就像$（'span.ui-slider-label'）.text（'new'）将改变它的所有滑块并只需要照顾手动改变它始终如一，因为它改变了所有情况下的文本（开/关） – user1464277

@ user1464277好吧，您需要遍历DOM来查找子/父/同级以查找需要更改的确切标签/ span /文本 –

如何更改滑块切换文本？

回答

相关问题