仅当正文具有特定类别时才开始放大弹出窗口答案

【问题标题】：Only start magnific popup when body has specific class仅当正文具有特定类别时才开始放大弹出窗口
【发布时间】：2015-04-24 12:44:21
【问题描述】：

我正在与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 标签会改变类，例如：

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

或

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

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

更新：这里是Fiddle

【问题讨论】：

这取决于类的变化，页面是否重新加载？
检查body是否有类...
是的，比如if( $(body).hasClass("lang-en-EN") )
查看我更新的小提琴，这不起作用:(

标签： javascript jquery popup magnific-popup

【解决方案1】：

在您已有的 if 语句中，也只需检查类，添加（例如）$(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);

【讨论】：

我用小提琴 (jsfiddle.net/1cs93ed8) 更新了它，但弹出窗口没有出现。我也没有收到任何错误。
好吧，你设置了 jsfiddle 来执行 JS 代码 onLoad，但是在代码本身中你再次等待 $(window).load() ，它已经被触发，因此不会触发再次。将其更改为“No wrap - in head”并清除您的 localStorage，然后它将工作：jsfiddle.net/1cs93ed8/1 - 当然它应该在绑定到加载事件的普通页面中工作。
为了更清楚，这里有另一个更新，超时为 0，localStorage 检查被注释掉，如果设置了类，每次都会显示弹出窗口：jsfiddle.net/1cs93ed8/2
天啊，真的！非常感谢！