Question

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

我有皇家滑块wordpress插件工作正常，直到我加载jquery砌体，使用这些设置：

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有砌筑）＆amp; 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指导我想要使用特定列宽的砌体（并将其指向单独的类＆＃34; .grid-sizer＆＃34;。我这样做，所以我可以控制 columnWidth 使用媒体查询以达到响应的目的，因为直接我不能在js中输入（只有整数px，甚至不是百分比！所以它在我的设计中很重要。）

4）砌体工作完美，仅用于模板的少量存档和自定义页面。但RoyalSlider插件，滑块停止工作。包含滑块的页面没有砌体，但是我认为如果将来我决定同时拥有两个......我需要一个解决方案。

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

Answer 1

我已经找到了问题所在。这里的问题是所有页面都加载了砌体（我将它排在头部）。 与royalslider没什么关系！

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

因此，我们可以在这里做几个选项，只需从删除砌体 js 其余页面不使用它。

使用 if statement 检查变量是否为空

或使用代替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的列和装订线宽度+清洁代码

加载jquery砌体时，皇家滑块不起作用

1 个答案: