Question

当我设置此过滤器并使用它时，除了一件事之外，该功能起作用。在过滤过程中有一个奇怪的动画。

In my codepen代码效果很好。复制并粘贴相同的JS版本和相同的构建版本。

In my website它不起作用。现在我已经完成并禁用了所有插件和除了我的代码之外被调用的每个脚本，这些脚本放在一个独立的.js文件中，以及CSS文件。

我不确定问题到底是什么，无法弄清楚如何进一步隔离问题以确定问题。

我在WordPress 4.7.5版本上运行该网站

以下是我的javascript。这是我唯一要打的东西。

(function($){
  'use strict';

    var grid = jQuery('.masonry').isotope(),
        $win = jQuery(window);

    jQuery('.filter span a').click(function(){
    jQuery( this ).parents( 'div.filter' ).find( 'span a' ).removeClass( 'active' );
    jQuery( this ).addClass( 'active' );

    grid.isotope({
      filter: jQuery(this).attr('data-filter'),
      layoutMode: 'fitRows',
    })
  });
});

Answer 1

删除<link rel='stylesheet' id='isotope-style-css' ...> CSS。

除非你指定你只使用CSS（see animationEngine in the Metafizzy docs），否则它将加载jQuery动画和CSS - 导致怪异。您可以通过查看此处复制的CodePen来测试这一事实，因为我添加了CSS：http://codepen.io/carasmo/pen/KmrPRb

Answer 2

您在控制台中出错：«未捕获的TypeError：无法读取属性'firstChild'的null»。

这是因为您尝试在不存在的元素#map-canvas上启动Google地图。

要解决这个问题...... 我要做的是从script.js删除＃881行到＃1183，这是您的Google Map API初始化脚本。

我会将它放在map.js中，我只会在实际存在ID为map-canvas的元素的页面上调用。

目前，此错误只是暂停了script.js的加载因此document.ready()函数未正确关闭。

您使用的(function($){与第209行的document.ready()相同。

过滤

2 个答案: