更改flipswitch jquery mobile的活动状态

Posted 2023-05-09

【中文标题】更改flipswitch jquery mobile的活动状态

【英文标题】：change active state of flipswitch jquery mobile

【发布时间】：2016-03-21 21:51:10

【问题描述】：

我正在尝试保存翻转开关的值，并且在重新加载 web 应用程序后，与状态具有相同值的选项应该处于活动状态。 IE。如果您选择<option id="v2" value="0">OFF</option>，则cookie status 的值为0，并且在重新加载页面后，翻转开关应显示OFF。

现在每次重新加载后，第一个选项总是会自动选择，并且该值也会被选中。我该如何改变呢？

我的翻转开关：

<select id="status" name="status" data-role="flipswitch">
  <option id="v1" value="1">ON</option>
  <option id="v2" value="0">OFF</option>


</select>

我的 php sn-p:

    $t = time() + 60 * 60 * 24 * 1000;
        setcookie("status", $_POST['status'], $t);

我自己的尝试：

function state () 
 var statuse = <?php echo $_COOKIE['status']; ?>;

 if (statuse == 0) 
     $('#v2').addClass('ui-flipswitch-active');

 
 if (statuse == 1) 
     $('#v1').addClass('ui-flipswitch-active');

 
   

state();

调用php脚本的函数：

function status () 
        var stats = $("#status").val();
    $.ajax( url: 'status.php',

         data: status: stats,
         type: 'post',
         success: function(output) 
                      //alert(output);
                  
);
   

status();
setInterval(function()
    status() // this will run after every 5 seconds
, 5000);

【参考方案1】：

我会尝试以下方法在页面加载时加载正确的开关状态：

<select id="status" name="status" data-role="flipswitch" class="">
  <option id="v1" value="1" <?php if (isset($_POST['status]') && $_POST['status'] == 1) echo 'class="ui-flipswitch-active"'; ?>>ON</option>
  <option id="v2" value="0" <?php if (!isset($_POST['status]') || $_POST['status'] == 0) echo 'class="ui-flipswitch-active"'; ?>>OFF</option>
</select>

如果您之后使用 javascript 执行此操作并且页面加载缓慢，您会得到“闪烁”，因为处理 javascript 需要一段时间。

还有 javascript：

$( "#status" ).change(function() 
    var stats = $("#status").val();
    $.ajax( url: 'status.php',
     data: status: stats,
     type: 'post',
     success: function(output) 
                  //alert(output);
              
    );
);  

这样当select的change事件被触发时，就会启动ajax查询。确保 php 脚本有 session_start();否则它可能无法正常工作。