Question

我正在尝试使用Cookie显示和隐藏div。我正在使用jQuery cookie插件。在执行此操作时，我要隐藏的div不会隐藏，而是保持可见。

正如您在代码中看到的那样，我正在使用ID为eerst的div中的按钮设置cookie。此后，需要重新加载页面，并且需要隐藏eerst div，然后需要显示ID为choicea的div。我已经尝试过其他方法来执行此操作，但是它尚未对我有用。

<div id="eerst" class="container">
  <div class="row center">
    <h5 class="header col s12 light">Aflevewring 1</h5>
    <video width="400" controls>
      <source src="video\ryan.mp4" type="video/mp4">
      Your browser does not support HTML5 video.
    </video>
  </div>
  <div class="row center">
    <form id="Test" action='' method='post'>
      <a type="submit" href="." name="On" onClick="SetCookie('choice1','choicea','1' )" class="waves-effect waves-light btn-large red darken-4">choice 1</a>
      <a type='submit' name="Off" class="waves-effect waves-light btn-large red darken-4">choice 2</a>
    </form>
  </div>
</div>
<div id="choicea" class="container">
  <div class="row center">
    <h5 class="header col s12 light">Aflevewring 1</h5>
    <video width="400" controls>
      <source src="video\some.mp4" type="video/mp4">
      Your browser does not support HTML5 video.
    </video>
  </div>
  <div class="row center">
    <form id="Test" action='' method='post'>
      <a type="submit" href="." name="On" onClick="SetCookie('choice2','choice2','1' )" class="waves-effect waves-light btn-large red darken-4">choice 1</a>
      <a type='submit' name="Off" class="waves-effect waves-light btn-large red darken-4">choice 2</a>
    </form>
  </div>
</div>

function SetCookie(c_name, value, expiredays) {
  var exdate = new Date();
  exdate.setDate(exdate.getDate() + expiredays);
  document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())
}

$(document).ready(function() {
  if ($.cookie('choice1') == "choicea") {
    $("#choicea").show();
    $("#eerst").hide();
  } else {
    $("#choicea").hide();
  }
});

Answer 1

将变量存储在cookie中并获取cookie值，检查字符串的正确性并显示/隐藏div。如下面的代码所示

var login_cookie = [];

    login_cookie.push(your_variable);

    var data_in_cookie = JSON.stringify(login_cookie);

    setCookie("cookie_name", data_in_cookie, 1);

    function SetCookie(c_name, value, expiredays) {
      var exdate = new Date();
      exdate.setDate(exdate.getDate() + expiredays);
      document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())
    }

    function getCookie(cname) {
        var name = cname + "=";

        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');

        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }

    $(document).ready(function() {
        var cookie_string = JSON.parse(getCookie("cookie_name"));
        var check_cookie_value = cookie_string[0];
      if (check_cookie_value == "choicea") {
        $("#choicea").show();
        $("#eerst").hide();
      } else {
        $("#choicea").hide();
      }
    });

使用Cookie显示/隐藏div

1 个答案: