代码问题

Question

我正在尝试创建一个Bootstrap警告框，用于记住用户单击关闭按钮的时间。我想我需要将这些信息存储在cookie中。理想情况下，cookie只会持续当前会话，然后他们返回该框将再次出现。

我正在使用jQuery-Cookie插件。我将其上传到/jquery-cookie-master。插件可以是found here。

这是我到目前为止所遵循的代码found here。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/jquery-cookie-master/jquery.cookie.js"></script>
<script>
    function runOnLoad(){
        if($.cookie('alert-box') == null) {
            $.cookie('alert-box', 'open', { expires: 7 });
        } else if($.cookie('alert-box') == 'close') {
            $(".close").hide();
        }

</script>

HTML：

<body onload="runOnLoad()">

<div class="alert alert-info">
  <button type="button" class="close" data-dismiss="alert" href="hideMe.php" onclick="hideMe()">×</button>
  <p>
    <strong>FORUM UPGRADE:</strong> In light of our recent surge in popularity we upgraded our forum and unfortunately lost all the old threads in the process.
  </p>
  <p>
    In an effort to kick-start the forum again we need your help. Sign up now and leave a post (it's free). Once we reach 100 threads every member will receive a special gift.
  </p>
  <p>
    <a href="http://example.com/forum/#/entry/register">
      <strong>Sign up to the forum now</strong>
    </a>.
  </p>
</div>

</body>

不幸的是它没有用。当我点击关闭按钮时它不记得该动作，如果我刷新页面，警告框将再次出现。

我做错了什么？

Answer 1

代码问题

在您的代码onload功能中，您似乎设置了奇怪的Cookie值，因为您只想在用户关闭提醒框时设置Cookie。
您的按钮具有href属性。这不是必需的以及无效的html。

解决方案

为了简单地隐藏和记住警告框的状态，您必须将事件绑定到关闭按钮，以便您知道用户何时单击关闭。

要使用jQuery绑定事件，您可以使用以下代码：

// When document is ready replaces the need for onload
jQuery(function( $ ){

    // Grab your button (based on your posted html)
    $('.close').click(function( e ){

        // Do not perform default action when button is clicked
        e.preventDefault();

        /* If you just want the cookie for a session don't provide an expires
         Set the path as root, so the cookie will be valid across the whole site */
        $.cookie('alert-box', 'closed', { path: '/' });

    });

});

要隐藏警告框，您只需检查正确的Cookie值并隐藏框：

jQuery(function( $ ){

    // Check if alert has been closed
    if( $.cookie('alert-box') === 'closed' ){

        $('.alert').hide();

    }

    // ... Binding code from above example

});

使用Bootstrap，让警报框记住关闭操作

1 个答案:

代码问题

解决方案