Isotope筛选器失效：点击按钮后所有网格项消失求助

我正处于Web开发入门阶段，遇到Isotope筛选器失效的问题。初始状态下所有网格项正常显示，但点击任意筛选按钮后，所有网格项会立即消失。我想要实现不同按钮对应不同分类的网格项筛选功能，请求帮助排查修复该问题。

我的JavaScript代码： #

var filter_btn = document.querySelectorAll(".filter-btn");

filter_btn.forEach((btn) => {
btn.addEventListener("click", () => {
  filter_btn.forEach((button) => button.classList.remove("active"));
  btn.classList.add("active");

  let filterValue = btn.dataset.filter;
  $(".grid").isotope({filter: filterValue});
});
});

$('.grid').isotope({
    itemSelector: '.grid-item',
    layoutMode: 'fitRows',
    transitionDuration: "0.6s"
  });

排查修复方案： #

• 检查data-filter与网格项类名的匹配
  Isotope的筛选器基于CSS选择器工作，按钮的data-filter值必须是有效的选择器格式。比如如果你的网格项有category-1类，按钮的data-filter应该设为.category-1（带点），而不是category-1。如果选择器格式错误，Isotope找不到匹配元素，就会导致所有项消失。

• 调整Isotope初始化顺序
  你当前先绑定了点击事件，再初始化Isotope，可能导致第一次点击时Isotope尚未完全就绪。把初始化代码移到事件绑定之前：

  // 先初始化Isotope
  $('.grid').isotope({
      itemSelector: '.grid-item',
      layoutMode: 'fitRows',
      transitionDuration: "0.6s"
  });
  
  // 再绑定筛选按钮事件
  var filter_btn = document.querySelectorAll(".filter-btn");
  filter_btn.forEach((btn) => {
      btn.addEventListener("click", () => {
          filter_btn.forEach((button) => button.classList.remove("active"));
          btn.classList.add("active");
  
          let filterValue = btn.dataset.filter;
          $(".grid").isotope({filter: filterValue});
      });
  });
  

• 确认脚本加载顺序
  必须在自定义脚本之前加载jQuery和Isotope，否则$().isotope()方法无法被识别：

  <!-- 先加载jQuery -->
  <script src="jquery.min.js"></script>
  <!-- 再加载Isotope -->
  <script src="isotope.pkgd.min.js"></script>
  <!-- 最后加载你的自定义脚本 -->
  <script src="your-script.js"></script>
  

• 验证网格项HTML结构
  确保所有需要筛选的项都有.grid-item类，并且直接嵌套在.grid容器下：

  <div class="grid">
      <div class="grid-item category-1">内容1</div>
      <div class="grid-item category-2">内容2</div>
      <div class="grid-item category-1">内容3</div>
  </div>
  

  缺少grid-item类的元素不会被Isotope纳入管理，筛选时会被隐藏。

内容的提问来源于stack exchange，提问作者thinkerSajjad