[英]changing the option text in a flip toggle switch in jQuery Mobile
I've got a toggle switch component in jQuery Mobile ( jsfiddle here )我在 jQuery Mobile 中有一个切换开关组件(这里是 jsfiddle )
<select name="toggle" id="toggle" data-role="slider">
<option id="value1" value="off">value1</option>
<option id="value2" value="on">value2</option>
</select>
I want to be able to change the displayed text programmatically at any given moment.我希望能够在任何给定时刻以编程方式更改显示的文本。
eg "value1" should become "newvalue1" and "value2" should become "newvalue2".例如,“value1”应该变成“newvalue1”,“value2”应该变成“newvalue2”。
This function should re-create the toggle-switch with the new values, but actually it does nothing:这个函数应该用新值重新创建切换开关,但实际上它什么都不做:
function yourfunction() {
//alert ("Changing stuff");
$('#value1').html ('newvalue1');
$('#value2').html ('newvalue2');
var myswitch = $("#toggle");
myswitch.slider("refresh", true);
}
window.setInterval(yourfunction, 3000);
Does this work for you?这对你有用吗?
JS JS
function yourfunction() {
//alert ("Changing stuff");
$('.ui-slider-label-a').text('newvalue1');
$('.ui-slider-label-b').text('newvalue2');
var myswitch = $("#toggle");
myswitch.slider("refresh", true);
}
window.setInterval(yourfunction, 3000);
jQM Adds a class for both options ( ui-slider-label-a
and ui-slider-label-b
), by using these classes you can access the correct element and change the text. jQM 为两个选项( ui-slider-label-a
和ui-slider-label-b
)添加一个类,通过使用这些类,您可以访问正确的元素并更改文本。
NOTE: The best way to see the additional markup jQM adds is to use Google Chrome ( IMHO ) and inspect the element注意:查看 jQM 添加的附加标记的最佳方法是使用 Google Chrome(恕我直言)并检查元素
try $('#value1').text('newvalue1');
试试$('#value1').text('newvalue1');
instead of $('#value1').html('newvalue1');
而不是$('#value1').html('newvalue1');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.