使用 jQuery Mobile 动态更改翻转切换的值答案

【问题标题】：Change value of flip toggle dynamically with jQuery Mobile使用 jQuery Mobile 动态更改翻转切换的值
【发布时间】：2010-11-24 05:53:10
【问题描述】：

我正在使用 jQuery Mobile，并将一些设置保存在 cookie 中。重新加载设置页面时，我读取 cookie 以设置所有值。我无法设置flip toggle switch。大多数元素只需触发keyup 或changed 事件，但我不确定翻转切换如何从选择框中获取其值。有什么想法吗？

【问题讨论】：

标签： jquery mobile jquery-mobile

【解决方案1】：

更改开关的值后，您必须刷新它才能切换动画：

$('#Switch2').val('on').slider("refresh");

【讨论】：

【解决方案2】：

好像坏了。

转到页面：http://jquerymobile.com/demos/1.0a2/#docs/forms/forms-switch.html 并使用 firebug 控制台运行以下命令：

$('#slider2').val('on').trigger('keyup');

它改变了开关“on”部分的宽度，但不移动滑块。

所以答案是：等待JQM的发布:)

此处发布的错误：https://github.com/jquery/jquery-mobile/issues/issue/676

【讨论】：

【解决方案3】：

我认为您可以像普通 HTML 一样在选择中设置值，并且翻转切换开关会自动拾取。即

<select name="slider" id="slider" data-role="slider">
  <option value="off">Off</option>
  <option value="on" selected="selected">On</option>
</select>

【讨论】：

但他使用 cookie，所以它发生在加载页面上，使用 javascript。

【解决方案4】：

实现此目的的一种简单方法是设置值、触发创建和刷新。之后，您需要触发 slidestop 事件来执行您绑定到滑块的任何操作。例如：

$('#mySlider').val('on').trigger('create').slider("refresh");
$('#mySlider').trigger('slidestop');

我已经在 jQuery 移动版上对此进行了测试。 1.3.0

【讨论】：

【解决方案5】：

使用$('#slider2').val('on') 将更改值，因为它应该。但是，它不会将ui-btn-active 等CSS 类添加到option，也不会从option 中删除该类。如果您想动态更改option，则必须手动处理这些部分（而不是 jQuery Mobile）。

【讨论】：

【解决方案6】：

这对我有用：

 if (someCondition) {
         $('#slider').val('off');
     }
     else {
         $('#slider').val('on');
     }
     try {
         $('#slider').slider("refresh");
     }
     catch (err) {
         console.log ("Error occurred refreshing slider (probabily first time!)");
     }

【讨论】：