仅当正文具有特定 class 时才启动放大弹出窗口

Question

我正在与 magnific popup 合作，想在有人走到一边时显示视频（包括不在用户每次访问该站点时显示它，因此是 localStorage 部分）。这一切都有效，这是代码：

 (
    function($) {
        $(window).load(function () {
            if(localStorage.getItem('popState') != 'shown'){
            setTimeout(function(){
                $.magnificPopup.open({
                    items: {
                        src: 'https://www.youtube.com/watch?v=blabla'
                    },
                    type: 'iframe',
                    iframe: {

                        patterns: {
                        youtube: {
                index: 'youtube.com/', 
                id: 'v=',
                src: 'http://www.youtube.com/embed/%id%?rel=0&autoplay=0'
            }
        }
    }
                });
            }, 5000);
            localStorage.setItem('popState','shown')}
        });
    })
(jQuery);

现在，我只想在特定页面上显示弹出窗口（选择特定语言时）。我注意到当用户选择一种语言时，body 标签会更改 class，例如：

<body class="lang-en-EN">

或

<body class="lang-de-DE">

当 class 语言从 EN 更改为 DE 时，有没有办法触发弹出窗口？

更新：这是Fiddle

Answer 1

在您已有的 if 语句中，也只需检查 class，添加（例如）$(body).hasClass("lang-en-DE"):

(function($) {
    $(window).load(function () {
        if($(body).hasClass("lang-en-DE") && localStorage.getItem('popState') != 'shown'){
        setTimeout(function(){
            $.magnificPopup.open({
                items: {
                    src: 'https://www.youtube.com/watch?v=blabla'
                },
                type: 'iframe',
                iframe: {
                    patterns: {
                        youtube: {
                            index: 'youtube.com/', 
                            id: 'v=',
                            src: 'http://www.youtube.com/embed/%id%?rel=0&autoplay=0'
                        }
                    }
                }
            });
        }, 5000);
        localStorage.setItem('popState','shown')}
    });
})
(jQuery);

仅当正文具有特定 class 时才启动放大弹出窗口

Only start magnific popup when body has specific class

javascript

jquery

popup

magnific-popup