未捕获的引用错误：同位素未定义

Question

我正在尝试将同位素库集成到我的自定义 WordPress 主题中以实现过滤和排序功能。但是，我在控制台中遇到错误：“同位素未定义。”我已按照步骤将同位素和 jQuery 排队，但我不确定是什么导致了此问题。这是我的functions.php文件代码

function amco_enqueue_assets()
{
    // Enqueue your stylesheets
    wp_enqueue_style('fontawesome', get_template_directory_uri() . '/css/all.min.css', [], '6.4.0', 'all');
    wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', [], '5.2.3', 'all');
    wp_enqueue_style('custome-css', get_template_directory_uri() . '/css/style.css', [], filemtime(get_template_directory() . '/css/style.css'), 'all');
    wp_enqueue_style('main-style', get_stylesheet_uri(), [], '1.0.0');
    // Enqueue your scripts
    wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery.min.js', [], '3.6.1');
    wp_enqueue_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', ['jquery'], '5.2.3');
    wp_enqueue_script('isotope', get_template_directory_uri() . '/js/isotope.pkgd.js', ['jquery'], '5.2.3', true);
    // //eqnueue filter js
    wp_register_script('main-script', get_template_directory_uri() . '/js/main.js',  [], filemtime(get_template_directory() . '/js/main.js'));
    wp_enqueue_script('lightbox-js', get_template_directory_uri() . '/js/lightbox.bundle.min.js', ['jquery'], '1.8.3');
    // Enqueue the registered script
    wp_enqueue_script('main-script', true);
}


add_action('wp_enqueue_scripts', 'amco_enqueue_assets');

这是我的 main.js 文件

  var gridElement = document.querySelector('#trade-list');
  var grid = new Isotope(gridElement, {
    transitionDuration: "0.5s",
  });
  
  // Filter items on button click
  var filterButtons = document.querySelectorAll(".filter-button-group button");
  
  filterButtons.forEach(function (button) {
    button.addEventListener("click", function () {
      var filterValue = this.getAttribute("data-filter");
      grid.arrange({ filter: filterValue });
    });
  });
  

Answer 1

这完全取决于文件加载/运行的顺序。您必须确保“同位素”文件在“主”文件之前加载，并且必须确保“主”文件在“主”文件之后加载html 因为您在主脚本中执行了 querySelector。