JQuery 在其他函数中设置了 cookie

Question

我有一个 javascript 函数 showHide(shID) ，这是一个隐藏 div 或在点击 "read more" 后显示内容的函数。这是我的 Fiddle ：http://jsfiddle.net/Garfrey/5xf72j4m/8/

如您所见，当用户点击它并显示更多内容时，但我只需要隐藏一次，意味着当用户回来访问我的页面时，隐藏的内容仍在显示。所以我需要添加 JQuery cookie ，但我写的是错误的，它不起作用。我是 Javascript 的新人。有谁知道如何解决它？提前致谢，我真的需要帮助。

这里是我的函数代码：

<script language="javascript" type="text/javascript">
jQuery(document).ready(function(){
   if($.cookie("example")=='1') {
      function showHide(shID) {
      if (document.getElementById(shID+'-show').style.display != 'none') {
         document.getElementById(shID+'-show').style.display = 'none';
         document.getElementById(shID).style.display = 'block';
      }
      else {
         document.getElementById(shID+'-show').style.display = 'inline';
         document.getElementById(shID).style.display = 'none';
      }
   }
   } else {

        $.cookie("example", "1");
    }                 
});

</script>

Answer 1

你不能在 jQuery 的 ready 函数中定义一个函数而不做这样的事情

var showHide;
$(function() { // Document ready
  showHide = function(sh) {
    //Insert function code here
  };
});

我认为在您的情况下，您最好在就绪函数之外定义函数，然后将其动态绑定到按钮的 onclick 处理程序。

我还为按钮添加了一个 data-showhide 属性，以将变量传递给 showhide 函数 onclick。

function showHide() {
  var shID = $(this).data("showhide"); // Use lower case only in data
  if (document.getElementById(shID + '-show').style.display != 'none') {
    document.getElementById(shID + '-show').style.display = 'none';
    document.getElementById(shID).style.display = 'block';
  } else {
    document.getElementById(shID + '-show').style.display = 'inline';
    document.getElementById(shID).style.display = 'none';
  }
}

$(function() {
  $("#example-show").on("click", showHide);
});

<a href="#" id="example-show" class="showLink" data-showhide="example">

可以在 showHide 函数中将 cookie 设置为特定值。就绪处理程序然后可以查询 cookie 并确定是否显示或隐藏 div。 fiddle 展示了这一点 http://jsfiddle.net/e52hxosb/19/

JQuery 在其他函数中设置了 cookie

JQuery cookie set in other Function

javascript

jquery

cookies