Question

尝试在此页面上调用Isotope时遇到一个奇怪的问题（https://starmountaincapital.com/media-center-test/），无论我是否使用＆＃39; $＆＃39; （当然，我不应该，但无论如何都要尝试）或者jQuery＆＃39;，我在控制台中得到相同的Not a Function错误。代码直接来自Isotope，还有一些附加内容可用于过滤：

var $grid = jQuery('.grid').isotope({
    // options
        itemSelector: '.grid-item',
        layoutMode: 'fitRows'
    });

// filter items on button click
    jQuery('.filter-button-group').on( 'click', 'button', function() {
        var filterValue = jQuery(this).attr('data-filter');
        $grid.isotope({ filter: filterValue });
    });

这样写得正确吗？

Answer 1

错误消息并不是抱怨jQuery不是函数，而是返回的jQuery对象的.isotope property不是函数。

在页面加载期间查看网络选项卡显示从https://starmountaincapital.com/wp-content/themes/starmountain/js/isotope.js?ver=1

检索isotope.js的GET请求返回404错误

服务器实际上返回HTML“NOT FOUND”错误页面。检查isotope.js是否已正确安装，如果已正确，请检查它所在的文件夹。

Answer 2

我通过访问您的网站网址找到的是 isotop.js 文件丢失，您能否将特定文件放在主题的 js 文件夹中并写入您编写上述代码的javascript文件的依赖关系中 isotop 的句柄。 E.G：

  wp_enqueue_script( 'isotop-js', 'path of isotop.js', array( 'jquery' ), '1.0', true );

  wp_enqueue_script( 'your-js', 'path of your js', array( 'isotop-js' ), '1.0', true );

希望这对你有用。

Answer 3

即使在正确添加isotope.js文件后，问题仍然存在。

问题实际上在JS本身。经过一些调整后，我将代码移出页脚并进入isotope.js，如下所示：

jQuery(function ($) {
 var container = $('#post-grid'); //The ID for the list with all the blog posts
 container.isotope({ //Isotope options, 'item' matches the class in the PHP
 percentPosition: true,
 itemSelector : '.grid-item', 
   layoutMode : 'masonry',
   masonry: {
   columnWidth: '.grid-item'
  }
 });

同位素：jQuery不是在WordPress中使用jQuery或$的函数错误

3 个答案: