jquery slideup和bootstrap的警报（仅显示一次）

Question

所以我在我的网站上创建了一条消息，说我的网站正在使用cookies：

使用以下代码创建：

<div id="cookies" class="container text-center">
    <h3>This site is using cookies.  
        <a id="hide" class="btn btn-info">Ok! No problem.</a>       
    </h3>
</div>    

所以我想，当有人按下按钮时，消息会使用jquery向上滑动。使用此代码：

<script>
$("#hide").click(function() {
    $("#cookies").slideUp(1000);
})

$("#show").click(function() {
    $("#cookies").slideDown(1000);
})
</script>

但由于某种原因，没有任何事情发生。这是我第一次使用jquery。

此外：

如果有人知道，是否可以每个IP地址只显示一次此消息？单击按钮后它不显示？

提前感谢您的回答！

Answer 1

您正在尝试slideUp一个看似不在您发布的HTML代码段中的元素（#cookies）。你确定它在那里吗？

如果您只想为每个IP显示一次消息，可以将其作为explained存储在Cookie中。

您可以通过this之类的JavaScript获取IP。

<强>更新

“可能是因为我的头和导航（消息是其中的一部分）都是单独的php文件，我包含在index.php中？” - 不，在将文件提供给客户端/浏览器之前，文件会“合并”在一起。

您正在尝试在加载jQuery之前执行脚本。如果您检查控制台，则会看到此错误Uncaught ReferenceError: $ is not defined。 jQuery将$定义为jQuery的快捷方式，因为它尚未加载但尚未定义并导致脚本错误。

将您的脚本放在页面底部的jQuery include下面。在关闭body - 标记之前，将所有脚本放在页面底部（例如Google Analytics代码段）始终是一种好习惯。 这可确保您的HTML和CSS呈现并且不会被任何JavaScript阻止。

您可以将脚本包装在ready处理程序中，以确保在整个页面准备好之前它不会执行，如下所示：

$(document).ready(function() {
    $("#hide").click(function() {
        $("#cookies").slideUp(1000);
    }); // don't forget the semicolon here

    $("#show").click(function() {
        $("#cookies").slideDown(1000);
    }); // don't forget the semicolon here
});

关闭body并关闭页面底部的head和body标记后，请不要忘记打开html。

您可能还想查看HTML5 Boilerplate以获取更多最佳做法。

Answer 2

您可以通过jQuery cookie插件进行管理，当您在浏览器上加载页面时，如果yes已经加载了该框，则检查cookie信息，然后只需隐藏hide()函数。

Cookie jQuery插件：

<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js" type="text/javascript"></script>

<强>的JavaScript

$(function() {
    var status = $.cookie('the_cookie');
    if (status == "hide") {
        $('#cookies').hide();
        console.log('the box hided on the IP');
    } else {

    }

    $('#hide').click(function() {
        $('#cookies').slideUp(1000, function() {
            $.cookie('the_cookie', 'hide', { expires: 30, path: '/' });
        });
    });
});

JSFiddle demo