Question

我遇到了一个非常讨厌的问题，从昨天起就一直困扰着我。

当用户仍在同一会话中时，我有一个脚本可以通过添加包含'display：none'的类来隐藏我的'简介'。然而，每当我刷新页面时，我的其他内容都无效。然而，复制我的代码并将其粘贴到控制台中确实有效。

jQuery(function($) { // this does the trick and also makes sure jQuery is not conflicting with another library
        if (!window.sessionStorage.gateIntro) {
            $('.intro-wrapper').addClass('intro-wrapper--show');
            $(document).on('click', '.intro-button', function(){
                jQuery('.intro-wrapper').addClass('intro-wrapper--hide');
                sessionStorage.gateIntro = 1;
                setTimeout(function() {
                    $('.container').fadeIn('slow');
                }, 1000);
            });

        // INTRO TIMER
        setInterval(function(){

            var random = Math.floor(Math.random() * 90 + 10);
            var random2 = Math.floor(Math.random() * 90 + 10);
            var random3 = Math.floor(Math.random() * 90 + 10);

            var number = "<p class='number'>" + random + " </p>";
            var number2 = "<p class='number'>" + random2 + " </p>";
            var number3 = "<p class='number'>" + random3 + "</p>";

            $('.intro-timer').empty().append(number, number2, number3);

        }, 100);
    }

    else if (window.sessionStorage.gateIntro) {

        console.log('there is a session key!');

        $('.intro-wrapper').addClass('intro-wrapper--hidden');

        $('.container').fadeIn('slow');


    }
});

要记住的一些事情;

我正在使用wordpress和angular，wordpress作为我的API来获取JSON
我确保在我的HTML中的其他js之后加载了我的script.js
运行此脚本通常会控制台记录'有一个会话密钥！'
只有.addClass（）和.fadeIn（）不起作用！
.intro-wrapper - 隐藏动画我的div 150视口高度到顶部，.intro-wrapper-hidden设置它显示无

**编辑**

我的问题是因为有人认为它与另一个关于会话存储不能正常工作的问题（sessionStorage isn't working as expected）重复，但它与会话存储无关，它不运行我的{{ 1}}和addClass()。

如果有人可以帮我解决问题，那就很好了。）

提前致谢！

Answer 1

您可能在文档完全准备好之前尝试访问DOM。宽这些线：

$('.intro-wrapper').addClass('intro-wrapper--hidden');
$('.container').fadeIn('slow');

我建议命名你的功能并在完成后调用它。

// Call Your Function once the DOM is ready
$( document ).ready( function() { setupIntro(); } );

// Name Your Function
function setupIntro() {
    if (!window.sessionStorage.gateIntro) {
        $('.intro-wrapper').addClass('intro-wrapper--show');
        $(document).on('click', '.intro-button', function(){
            jQuery('.intro-wrapper').addClass('intro-wrapper--hide');
            sessionStorage.gateIntro = 1;
            setTimeout(function() {
                $('.container').fadeIn('slow');
            }, 1000);
        });

        // INTRO TIMER
        setInterval(function(){
            var random = Math.floor(Math.random() * 90 + 10);
            var random2 = Math.floor(Math.random() * 90 + 10);
            var random3 = Math.floor(Math.random() * 90 + 10);

            var number = "<p class='number'>" + random + " </p>";
            var number2 = "<p class='number'>" + random2 + " </p>";
            var number3 = "<p class='number'>" + random3 + "</p>";

            $('.intro-timer').empty().append(number, number2, number3);

        }, 100);
    }
    else if (window.sessionStorage.gateIntro) 
    {
        $('.intro-wrapper').addClass('intro-wrapper--hidden');
        $('.container').fadeIn('slow');
    }
}

这将确保您在DOM元素存在之前不会尝试访问它们。

脚本不会运行，但会在控制台中运行

1 个答案: