Question

我有一个隐藏元素，在用户滚动时出现。当文字＆＃34;点击关闭＆＃34;单击（位于元素内部），然后元素隐藏并设置cookie，这会阻止它在刷新时的可见性。我的问题：在设置cookie而不刷新时，元素是否可能隐藏？目前，单击其中的文本时，元素会隐藏，但在滚动时会再次显示。

我目前的设置：fiddle。

感谢。

Answer 1

最直接的方法是注意该项目是隐藏的：

$(".set-cookies").on("click", function () {
    $("#test").hide();
    $("#test").data('hidden', true);
});

并在滚动时尊重：

$(document).scroll(function() {
    var y = $(this).scrollTop();
    if ((y > 300) && ! $('#test').data('hidden')) {
        $("#test").show();
    }
});

Updated JSFiddle

Answer 2

如果您只想通过测试cookie来执行此操作，则应将cookie检查条件移动到滚动事件处理程序中。现在，如果cookie不存在，你将在页面加载时绑定滚动事件，但是一旦设置好，你就不会解除滚动事件的绑定。见updated fiddle.

$(document).scroll(function() {
    if (document.cookie.indexOf("testCookie") < 0) {
        var y = $(this).scrollTop();
        if (y > 300) {
            $("#test").show();
        }
    }
});

Answer 3

以下是我将如何解决它，通过解除滚动侦听器的绑定，这可以提高性能。

function setCookie() {
    days = 15;
    CookieDate = new Date();
    if (days > 0) {
        CookieDate.setTime(CookieDate.getTime() + (days * 24 * 60 * 60 * 1000));
        document.cookie = "testCookie=true; expires=" + CookieDate.toGMTString();
    }
    if (days === 0) {
        document.cookie = "testCookie=true;";
    }
}

function hasCookie() {
    return document.cookie.indexOf("testCookie") > 0;
}

function scrollListener() {
    var y = $(this).scrollTop();
    if (y > 300) {
        $("#test").show();
    }   
}

$(".set-cookies").on("click", function () {
    setCookie();
    $("#test").hide();

    // remove scroll listener
    $(document).off("scroll", scrollListener);
});


// initial check on startup
if (hasCookie()) {
    // cookie set, hide message
    $("#test").hide();
} else {
    // cookie missing, register scroll listener
    $(document).scroll(scrollListener);
}

JSFiddle：https://jsfiddle.net/0t877knu/8/

Jquery - 生成cookie后隐藏元素

3 个答案: