使用 jQuery Mobile 动态更改翻转开关的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4263858/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change value of flip toggle dynamically with jQuery Mobile
提问by Markus T.
I'm working with jQuery Mobile, and I save some settings in a cookie. When the settings page is reloaded, I read the cookie to set all the values. I'm having trouble setting the flip toggle switch. Most elements just have to trigger the keyupor changedevents, but I'm not sure how the flip toggles gets its value from the select box. Any ideas?
我正在使用 jQuery Mobile，并将一些设置保存在 cookie 中。重新加载设置页面时，我读取 cookie 以设置所有值。我在设置翻转拨动开关时遇到问题。大多数元素只需要触发keyup或changed事件，但我不确定翻转开关如何从选择框中获取其值。有任何想法吗？
回答by Chris D.
After you change the value of the switch you have to refresh it for the animation to toggle:
更改开关的值后，您必须刷新它才能切换动画：
$('#Switch2').val('on').slider("refresh");
回答by naugtur
It looks like it's broken.
它看起来像坏了。
Go to the page: http://jquerymobile.com/demos/1.0a2/#docs/forms/forms-switch.htmland use firebug console to run the following:
转到页面：http: //jquerymobile.com/demos/1.0a2/#docs/forms/forms-switch.html并使用 firebug 控制台运行以下命令：
$('#slider2').val('on').trigger('keyup');
it changes the width of "on" part of the switch, but doesn't move the slider.
它改变了开关“开”部分的宽度，但不移动滑块。
So the answer is: wait for the release of JQM :)
所以答案是：等待JQM的发布:)
Bug issued here: https://github.com/jquery/jquery-mobile/issues/issue/676
这里发布的错误：https: //github.com/jquery/jquery-mobile/issues/issue/676
回答by wyz
I think you can just set the value in select like normal HTML and flip toggle switch will pick up automatically. i.e.
我认为您可以像普通 HTML 一样在 select 中设置值，然后翻转切换开关将自动启动。IE
<select name="slider" id="slider" data-role="slider">
<option value="off">Off</option>
<option value="on" selected="selected">On</option>
</select>
回答by Danmar
An easy way to achieve this is to set the value, trigger the create and refresh. Afterwards you need to trigger the slidestop event to perform any action you bound to the slider. eg:
实现此目的的一种简单方法是设置值，触发创建和刷新。之后，您需要触发 slidestop 事件以执行您绑定到滑块的任何操作。例如：
$('#mySlider').val('on').trigger('create').slider("refresh");
$('#mySlider').trigger('slidestop');
I've tested this on jQuery mobile ver. 1.3.0
我已经在 jQuery 移动版上测试过了。1.3.0
回答by janesconference
This works for me:
这对我有用：
if (someCondition) {
$('#slider').val('off');
}
else {
$('#slider').val('on');
}
try {
$('#slider').slider("refresh");
}
catch (err) {
console.log ("Error occurred refreshing slider (probabily first time!)");
}
回答by Byron Walker
Using $('#slider2').val('on')will change the value, as it is supposed to. However, it does not add the CSS classes such as ui-btn-activeto the option, nor does it remove that class from the the option. If you want to dynamically change the option, then you will have to take care of those parts manually (not jQuery Mobile).
使用$('#slider2').val('on')将改变值，正如它应该的那样。但是，它不会将 CSS 类添加ui-btn-active到option，也不会从option. 如果要动态更改option，则必须手动处理这些部分（而不是 jQuery Mobile）。
