Question

我正在将我的一个表单更新为启用jQuery切换。形式巨大，所有领域都不是必需的，但如果用户希望填满所有领域，那就更好了。关于切换的一般想法是隐藏所有不必要的字段，所以是切换。

在互联网上查看一些示例时，我注意到这些表单不记得用户决定关闭窗口并稍后再回来填充它时的状态，如果我必须使用浏览器cookie需要记住表格的状态＆＃34;。

<div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
    <label class="onoffswitch-label" for="myonoffswitch"></label>
</div>
<p> hi </p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.4/js.cookie.js"></script> 
<script>

$(function() {

  if (Cookies) {
    $("p").toggle(!(!!Cookies("toggle-state")) || Cookies("toggle-state") === 'true');
  }

  $('.onoffswitch-checkbox').click(function() {
     console.log($(this).is(":checked"));
      $("p").toggle();
      Cookies.set("toggle-state", $("p").is(':visible'), {
        expires: 1,
        path: '/'
      });
    });
});

它正在工作，请检查Fiddle。

之后我注意到的是，现在，cookie会记住最后一次关闭但不是切换按钮状态的切换状态。

如果我需要显示文字，我会切换向左滑动的切换按钮，从灰色变为绿色并显示文本。我关闭表单窗口，重新加载显示文本的相同表单（记住，我们有一个cookie，最后我们关闭窗口显示文本）但切换按钮是灰色或关闭。

如何纠正这个问题？

Answer 1

您的开关始终开始，因为您已将选中的属性硬编码到您的HTML中（或者至少是您的小提琴）

如果在进行cookie检查时使用jQuery设置checked属性，它将起作用。

if (Cookies) {
    $("p").toggle(!(!!Cookies("toggle-state")) || Cookies("toggle-state") === 'true');

    // ADD THIS
    if(Cookies("toggle-state") === 'true') {
        $('#myonoffswitch').prop("checked", true);
    }
}

令人困惑的切换按钮状态。

1 个答案: