Question

我正在尝试保存flipswitch的值，并在重新加载webapp后，具有与状态相同值的选项应该是活动的。即如果您选择<option id="v2" value="0">OFF</option>，则Cookie status的值为0，重新加载页面后，flipswitch应显示OFF。

现在每次重新加载后，总会自动选择第一个选项并使用该值。我怎么能改变呢？

my flipswitch：

<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

我会尝试以下方法在pageload上加载正确的switchstate：

<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（）;否则它可能无法正常工作。

改变flipswitch jquery mobile的活动状态

1 个答案: