Javascript cookie show/hide onclick

Question

我对 Javascript cookie 有疑问。我的脚本无法正常工作。只有当我删除所有 cookie 设置时，代码才有效。

html部分：Hide/Showdiv

<div id="toolo"> 
    text 1
    <button id="hide">Open</button>           
</div>
<div id="toolo2">
    text 2
    <button id="show">Hide</button>
</div>

Javascript 代码：我想在页面加载时显示 div "toolo"，但是当用户隐藏 div "tolo" 时，将仅显示 div "toolo2".

// if open div cookie
if($.cookie('state') == 'open'){
    $("#toolo").show();
    $("#toolo2").hide();
} 
// if close div cookie
else if ($.cookie('state') == 'closed') {
    $("#toolo").hide();
    $("#toolo2").show();
}
//firs time page loading    
else {  
    $("#toolo2").hide();  
}   
// hide button 
$("#hide").click(function(){
    $("#toolo").hide();
    $("#toolo2").show();
    $.cookie('state', 'open', { expires:3 });
    return false;  
});
// show button
$("#show").click(function(){
    $("#toolo").show();
    $("#toolo2").hide();   
    $.cookie('state', 'closed', { expires:3 })
    return false;
});

http://jsfiddle.net/h1foecn7/17/

Answer 1

您需要使用 Jquery Cookie。包括它 -

https://github.com/js-cookie/js-cookie

我希望在那之后它会起作用。

Answer 2

假设您已正确安装 jquery.js 和 jquery.cookie.js，试试这个 - 我给了您的显示和隐藏按钮一个 class 的切换

FIDDLE

$(function() {
  var state = $.cookie('state');
  var open = state == "open";
  $("#toolo").toggle(open);
  $("#toolo2").toggle(!open);

  $(".toggle").on("click",function(e){
    e.preventDefault();
    var open = this.id=="show";
    $("#toolo").toggle(open);
    $("#toolo2").toggle(!open);
    $.cookie('state', open?"open":"closed", { expires:3 });
  });
});

请注意，下面的代码片段在 SO 时不会运行但如果您将其复制到您的服务器运行

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Demo by mplungjan</title>
  
  <script type='text/javascript' src='//code.jquery.com/jquery-2.1.3.js'></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    
  <script type='text/javascript'>


$(function() {
  var state = $.cookie('state');
  var open = state == "open";
  $("#toolo").toggle(open);
  $("#toolo2").toggle(!open);

  $(".toggle").on("click",function(e){
    e.preventDefault();
    var open = this.id=="show";
      console.log(open,this.id)
    $("#toolo").toggle(open);
    $("#toolo2").toggle(!open);
    $.cookie('state', open?"open":"closed", { expires:3 });
  });
});
</script>


</head>
<body>
  <div id="toolo"> text 1
   <button class="toggle" id="hide">Open</button>           
  </div>
  <div id="toolo2">
     text 2
    <button class="toggle" id="show">Hide</button>
  </div>
</body>
</html>

Answer 3

您似乎没有设置cookie。

查看更新 fiddle：

http://jsfiddle.net/h1foecn7/18/

包括jquery-cookie.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

设置cookie

   // onload js
$.cookie('state', 'closed');

Answer 4

你把名字搞得一团糟...试试这个（在 JSFiddle 中测试并工作）

// if open div cookie
if($.cookie('state') == 'opened'){
  $("#toolo").show();
  $("#toolo2").hide();
} 
// if close div cookie
else if ($.cookie('state') == 'closed') {
  $("#toolo").hide();
  $("#toolo2").show();
}
//first time page loading    
else {  
  $("#toolo2").hide(); 
}

// hide button 
$("#hide").click(function(){
  $("#toolo").hide();
  $("#toolo2").show();
  $.cookie('state', 'closed', { expires:3 });
  return false;  
});
// show button
$("#show").click(function(){
  $("#toolo").show();
  $("#toolo2").hide();   
  $.cookie('state', 'opened', { expires:3 })
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<div id="toolo"> 
  Text 1
  <button id="hide">Hide</button>           
</div>

 <div id="toolo2">
  Text 2
  <button id="show">Open</button>
</div>

Javascript cookie show/hide onclick

Javascript cookie show/hide onclick

html

javascript

cookies

jquery