加载 jquery masonry 时皇家滑块不起作用答案

【问题标题】：royal slider does not work when jquery masonry loaded加载 jquery masonry 时皇家滑块不起作用
【发布时间】：2014-10-16 15:59:12
【问题描述】：

我真的是 jquery 的初学者 - 只有一般的理解 + 其他编程语言的背景。

我有皇家滑块 wordpress 插件，它工作正常，直到我加载 jquery masonry，使用以下设置：

jQuery(document).ready(function($){
    var container = document.querySelector('#portfolio-masonry');
    var msnry = new Masonry( container, {
        gutter: 30,
        itemSelector: '.portfolio-block',
        columnWidth: container.querySelector('.grid-sizer')
    });

});

这以某种方式影响了royalslider（未显示图像）并出现控制台错误：

Uncaught TypeError: Cannot read property 'querySelector' of null

这似乎与 querySelector 发生了某种冲突。我该如何解决这个问题。

网站：WordPress（3.9 有砖石）&royalslider

提前致谢。

编辑：

1) 我在functions.php（wordpress）中加入我的砌体和设置

wp_enqueue_script( 'redefined-reality-masonry', get_template_directory_uri() . '/js/masonry-settings.js', array('masonry'), '20140401', true );

2) 我使用非常简单的 html 标记：

<div id="portfolio-masonry">
  <div class="portfolio-block"></div>
  <div class="portfolio-block"></div>
  ...
</div>

3) 我使用 querySelector 来引导我想要使用特定宽度的列的砌体（并将其引导到单独的类“.grid-sizer”。我这样做是为了控制 columnWidth将媒体查询用于响应目的，因为我不能直接在 js 中输入它（只有整数 px，甚至不是百分比！所以它在我的设计中很重要）。

4) 砌体完美，仅用于模板的少数存档和自定义页面。但是 RoyalSlider 插件，滑块停止工作。包含滑块的页面没有砖石结构，但是我认为如果将来我决定两者都有一个......那么我需要一个解决方案。

我不知道我还应该添加什么：D

【问题讨论】：

您的页面中是否有包含id="portfolio-masonry" 和class="grid-sizer" 的HTML 元素？
仅在砌体在起作用的一页中。其他页面没有这些类，仍然提示这个错误。
您必须发布更多代码才能准确显示您是如何实现的。如果您在所有页面上都收到此错误，那么您在所有页面上都调用了 masonry。 Uncaught TypeError 是致命的，将停止 jQuery 执行。
嗨，我发布了更多内容。还注意到，仅当页面包含滑块时才会出现错误 - 其他都很好。
在 '#portfolio-masonry' 中是否有一个具有类 '.grid-sizer' 的元素？

标签： jquery wordpress jquery-masonry

【解决方案1】：

我已经找到了问题所在。这里的问题是所有页面中都加载了砖石（我将它排在了头部）。 与皇家滑翔机无关！

但是，querySelector 正在寻找一个带有 .grid-sizer 的元素，而在它没有的页面中，masonry 无法处理空变量给我们：Uncaught TypeError。

所以我们可以在这里做一些选择，只需从 其余页面 中删除 masonry js 不使用它。
使用if语句检查变量是否不为空
或者使用其他东西代替querySelectro。（我做了什么，你可以在下面看到）

JS（对，我也决定使用同位素，但这并不能改变它使用砖石的事实）

    jQuery(document).ready(function($){
        $(function () {
            var $alpha = $('#portfolio-masonry');
            var $container = $('#isotope-variables');

            $container.isotope({
                itemSelector: '.portfolio-block',
                masonry: {
                    columnWidth: '.grid-sizer',
                    gutter: '.gutter-sizer'
                }
            }).isotope('insert', $alpha.find('.portfolio-block'));
        });
    });

标记

<div id="portfolio-masonry">
    <div class="portfolio-block"></div>
    <div class="portfolio-block"></div>
    ...
</div>
<div id="isotope-variables">
    <div class="grid-sizer"></div>
    <div class="gutter-sizer"></div>
</div>

像魅力一样工作。使用自定义 css 响应列和装订线宽度 + 干净的代码

【讨论】：