javascript - 更改 Flipswitch jquery mobile 的事件状态

Question

我正在尝试保存翻转开关的值，并且在重新加载网络应用程序后，与状态具有相同值的选项应该处于事件状态。 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 代码片段:

    $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);

Answer 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();否则可能无法工作。