如何更改滑块开关文字? [英] How to change slider switch text?
本文介绍了如何更改滑块开关文字?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个标准选择开关.而且我想在页面加载后(就绪)更改特定选项的文本.值已更改，但在浏览器用户界面视图中未更新. 'refresh'和change()没有帮助.
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'/>
这个还不能正常工作:
<!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>
推荐答案
这样的事情有用吗?
JS
$('#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>
-->
这篇关于如何更改滑块开关文字?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
