Question

我有一个移动网站，我需要为用户提供明亮和黑暗的界面选项。为此我建立了一个复选框，风格像iPhone IOS7开关。按预期工作，但现在我想传递页面之间复选框的状态。

我也使用bootstrap作为移动框架。

我四处搜索，到目前为止这是我的代码，你能帮我弄清楚为什么不工作吗？

我需要根据#indlink开关的状态设置iface-toggle链接。并将href设置为ind.html?iface=light或ind.html?dark。

控制台日志正确回复了交换机的状态，但出于某种原因，并未更改href地址。

我还需要将接收页面上的开关设置为url值。我已经知道如何解析url变量，我打算使用$('indlink').prop('checked', true)。但是我还没有测试过这个，但是如果你也可以帮我解决这个问题，那将是一个爆炸。

代码：

＆＃13;

$(document).ready(function() {

  if ($("#iface-toggle").prop("checked")) {
    $("#indlink").attr("href", "ind.html?iface=light");
    console.log("checkbox is checked");
  } else {
    $("#indlink").attr("href", "ind.html?iface=dark");
    console.log("checkbox is not checked");
  }

  $("#iface-toggle").change(function() {
    if (this.checked) {
      $('body').css({
        "background-color": "white",
        "color": "black"
      });
      $('input select textarea').css({
        "color": "white"
      });
      $("#indlink").attr("href", "ind.html?iface=light");
    } else {
      $('body').css({
        "background-color": "#282c32",
        "color": "white"
      });
      $('input select textarea').css({
        "color": "black"
      });
      $("#indlink").attr("href", "ind.html?iface=dark");
    }
  })


});

＆＃13;

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-right">
    <li><a id="indlink" href="ind.html">Indicators</a>
    </li>
    <li>
      <div class="switch">
        <input id="iface-toggle" class="cmn-toggle cmn-toggle-round" type="checkbox">
        <label for="iface-toggle" class="label-for-check"></label>
      </div>Interface Color</li>
  </ul>
</div>

＆＃13;

UPDATE !!!

出于文档目的，这是最终的Javascript：

if(localStorage.dark == 'true') {
    $('body').css({"background-color": "#282c32", "color": "white"});
    $('input select textarea').css({"color": "black"});
    document.getElementById('iface-toggle').checked = false
} else {
    $('body').css({"background-color": "white","color": "black"});
    $('input select textarea').css({"color": "white"});
    document.getElementById('iface-toggle').checked = true
}

$("#iface-toggle").change(function() {
    if(this.checked) {
        $('body').css({"background-color": "white","color": "black"});
        $('input select textarea').css({"color": "white"});
        localStorage.dark = 'false';
    } else {
        $('body').css({"background-color": "#282c32","color": "white"});
        $('input select textarea').css({"color": "black"});
        localStorage.dark = 'true';
    }
});

Answer 1

你可以使用localstorage，如果它们都在同一个domian上来保存和检索值

组：

localStorage.dark = 'true';

得到：

if(localStorage.dark == 'true'){
  //Do This
}

请注意，本地存储只保存为字符串，因此请确保将引号保持为true。

Answer 2

在html中传递参数true页面的唯一方法是使用storage api

如果您希望保存用户值，请使用本地存储，这样即使用户重新启动设备，他的偏好仍然可以像matt Coady的样本一样收集

如果您希望在重新启动浏览器时随时设置其优先级，请使用会话存储

组：

sessionStorage.dark = 'true';

得到：

if(sessionStorage.dark == 'true'){
  //Do This
}

别忘了删除不需要的本地存储localStorage.removeItem("dark")

根据复选框检查和设置url变量

2 个答案: