基于cookie的值隐藏分区加载页面​​时 [英] Hiding div based on cookie value when loading the page

问题描述

我创建了一个DIV和jQuery来隐藏和显示DIV。当用户点击隐藏我想隐藏5分钟的股利，直到用户再次加载页面。我已保存状态的cookie（是否隐藏或不）。当用户加载页面为所述第二时间在5分钟内的股利应隐藏。我曾尝试code以下，这是行不通的。有人可以帮我？

 ＆LT;脚本＆GT;
        $（文件）。就绪（函数（）{
            如果（的getCookie（隐藏）===是）{
                $（＃divAlert），隐藏（）。
                如果（$（＃隐藏）是（：可见））{
                    $（＃隐藏），CSS（知名度，隐藏）。
                }                $（＃秀），CSS（知名度，可见）;
            }
            $（＃隐藏）。点击（函数（）{
                $（＃divAlert），隐藏（）。
                如果（$（＃隐藏）是（：可见））{
                    $（＃隐藏），CSS（知名度，隐藏）。
                }
                setcookie（）函数;
                $（＃秀），CSS（知名度，可见）;            }）;            $（＃展）。点击（函数（）{
                $（＃divAlert）显示（）。                $（＃隐藏），CSS（知名度，可见）;
                如果（$（＃展）是（：可见））{
                    $（＃秀），CSS（知名度，隐藏）。
                }
            }）;
        }）;        功能setCookie方法（）{
            VAR的currentdate =新的日期（）;
            的document.cookie =隐藏= YES; exppires =+ currentDate.getMinutes（）+ 1;
        }        功能的getCookie（cookiename）{
            变种结果= document.cookie.match（| + cookie_name +（^）？=（[^] *）（; | $）'）;            如果（结果）
                返回（UNESCAPE（效果[2]））;
            其他
                返回null;
        }
    ＆LT; / SCRIPT＆GT;
 

解决方案

假设你的的getCookie（）和 setCookie方法（）功能正常工作，此行您的code的：

 的getCookie（隐藏）;
 

应该是：

 的getCookie（潜伏）;
 

您会，如果你看着你的JavaScript错误控制台都立即看到这个问题，因为这可能是一个脚本错误。

您code的其余部分可以简化如下：

  $（文件）。就绪（函数（）{
        如果（的getCookie（隐藏）===是）{
            $（＃divAlert），隐藏（）。
            $（＃隐藏），CSS（知名度，隐藏）。
            $（＃秀），CSS（知名度，可见）;
        }
        $（＃隐藏）。点击（函数（）{
            $（＃divAlert），隐藏（）。
            $（本）的.css（知名度，隐藏）;
            $（＃秀），CSS（知名度，可见）;
            setcookie（）函数;        }）;        $（＃展）。点击（函数（）{
            $（＃divAlert）显示（）。
            $（本）的.css（知名度，隐藏）;
            $（＃隐藏），CSS（知名度，可见）;
        }）;
    }）;
 

I have created a div and used jquery to hide and show the div. When the user click on hide I want to hide the div for 5 minutes till the user loads the page again. I have saved the state (whether hidden or not) in a cookie. When the user is loading the page for the second time within 5 mins the div should be hidden. I have tried the code below and it is not working. Can somebody help me with this?

<script>
        $(document).ready(function () {
            if (getCookie(hidden) === "yes") {
                $("#divAlert").hide();
                if ($("#Hide").is(":visible")) {
                    $("#Hide").css("visibility", "hidden");
                }

                $("#Show").css("visibility", "visible");
            }


            $("#Hide").click(function () {
                $("#divAlert").hide();
                if ($("#Hide").is(":visible")) {
                    $("#Hide").css("visibility", "hidden");
                }
                setCookie();
                $("#Show").css("visibility", "visible");

            });

            $("#Show").click(function () {
                $("#divAlert").show();

                $("#Hide").css("visibility", "visible");


                if ($("#Show").is(":visible")) {
                    $("#Show").css("visibility", "hidden");
                }
            });           
        });

        function setCookie() {
            var currentDate = new Date();
            document.cookie = "hidden=yes;exppires=" + currentDate.getMinutes() + 1;
        }

        function getCookie(cookiename) {
            var results = document.cookie.match('(^|;) ?' + cookie_name + '=([^;]*)(;|$)');

            if (results)
                return (unescape(results[2]));
            else
                return null;
        }
    </script> 

解决方案

Assuming your getCookie() and setCookie() functions work properly, this line of your code:

getCookie(hidden);

should be:

getCookie("hidden");

You would have seen this problem immediately if you looked at your javascript error console as this is probably a script error.

The rest of your code can be simplified like this:

    $(document).ready(function () {
        if (getCookie(hidden) === "yes") {
            $("#divAlert").hide();
            $("#Hide").css("visibility", "hidden");
            $("#Show").css("visibility", "visible");
        }


        $("#Hide").click(function () {
            $("#divAlert").hide();
            $(this).css("visibility", "hidden");
            $("#Show").css("visibility", "visible");
            setCookie();

        });

        $("#Show").click(function () {
            $("#divAlert").show();
            $(this).css("visibility", "hidden");
            $("#Hide").css("visibility", "visible");
        });           
    });

这篇关于基于cookie的值隐藏分区加载页面​​时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！