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

Question

我遇到了一个非常烦人的问题，从昨天开始就一直困扰着我。

当用户仍在同一个会话中时，我有一个脚本可以通过添加一个包含“display:none”的类来隐藏我的“intro”。然而，每当我刷新页面时，我的 else if 都不起作用。但是，复制我的代码并将其粘贴到控制台中确实有效。

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
• 我确保我的 script.js 在我的 HTML 中的其余 js 之后加载
• 运行此脚本通常会在控制台日志中显示“有一个会话密钥！”
• 只有 .addClass() 和 .fadeIn() 不起作用！
• .intro-wrapper--hide 将我的 div 150 视口高度动画到顶部，.intro-wrapper-hidden 将其设置为不显示

** 编辑 **

我的问题被否决了，因为有人认为它与另一个关于会话存储不起作用的问题 (sessionStorage isn't working as expected) 重复，但它与会话存储无关，它不运行我的 addClass() 和fadeIn()。

如果有人能帮我解决问题，我会很好:)

提前致谢！

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 元素存在之前对其进行访问。