单页中同时使用多个jQuery Filterizr的问题

嘿，我之前也碰到过Filterizr多实例初始化的坑，你的问题应该是插件默认的全局实例冲突或者DOM结构没配对导致的，咱们一步步来解决：

第一步：先检查你的DOM结构是否合规 #

Filterizr对每个图库的结构有明确要求，每个独立图库必须是一个包含.filter-item子元素的容器，而且如果有筛选按钮，要和对应图库绑定好，别让两个图库的控制元素混在一起。比如正确的结构应该是这样：

<!-- 第一个独立图库 -->
<div id="gallery1">
  <!-- 第一个图库的专属筛选控制区 -->
  <div class="gallery1-controls">
    <button data-filter="all">全部</button>
    <button data-filter="nature">自然</button>
    <button data-filter="city">城市</button>
  </div>
  <!-- 第一个图库的图片项 -->
  <div class="filter-item" data-category="nature">
    <img src="nature1.jpg" alt="自然图1">
  </div>
  <div class="filter-item" data-category="city">
    <img src="city1.jpg" alt="城市图1">
  </div>
</div>

<!-- 第二个独立图库 -->
<div id="gallery2">
  <!-- 第二个图库的专属筛选控制区 -->
  <div class="gallery2-controls">
    <button data-filter="all">全部</button>
    <button data-filter="animal">动物</button>
    <button data-filter="plant">植物</button>
  </div>
  <!-- 第二个图库的图片项 -->
  <div class="filter-item" data-category="animal">
    <img src="animal1.jpg" alt="动物图1">
  </div>
  <div class="filter-item" data-category="plant">
    <img src="plant1.jpg" alt="植物图1">
  </div>
</div>

重点：每个图库的控制区要单独命名，别都用.filter-controls，避免插件搞混两个图库的控制按钮。

第二步：正确初始化两个独立的Filterizr实例 #

你之前直接调用两次$('#galleryID').filterizr()报错，大概率是旧版本Filterizr的全局变量冲突问题，或者没指定每个实例的控制范围。试试给每个实例单独配置控制元素的选择器：

$(document).ready(function() {
  // 初始化第一个图库，指定它的专属控制按钮选择器
  const gallery1Filter = $('#gallery1').filterizr({
    controlsSelector: '#gallery1 .gallery1-controls'
  });

  // 初始化第二个图库，同样指定专属的控制按钮选择器
  const gallery2Filter = $('#gallery2').filterizr({
    controlsSelector: '#gallery2 .gallery2-controls'
  });
});

这样插件就能明确区分两个图库的控制区域和筛选项，不会互相干扰。

第三步：排查报错的核心原因 #

你遇到的Cannot read property 'length' of undefined错误，本质是插件在初始化第二个实例时，找不到对应的.filter-item元素或者控制按钮，可能的情况：

• 第二个图库的容器#gallery2里没有带.filter-item类的子元素，插件找不到可筛选的项
• 两个图库的控制按钮用了相同的类名，插件把第一个图库的控制逻辑套到了第二个上面
• 你用的Filterizr版本太旧，不支持多实例，建议更新到最新版

备选方案：手动绑定筛选事件 #

如果还是有问题，咱们可以绕开插件的自动控制绑定，手动给每个图库的按钮加点击事件：

$(document).ready(function() {
  // 先初始化两个实例
  const gallery1 = $('#gallery1').filterizr();
  const gallery2 = $('#gallery2').filterizr();

  // 第一个图库的筛选按钮事件
  $('#gallery1 .gallery1-controls button').on('click', function() {
    const filterVal = $(this).data('filter');
    gallery1.filterizr('filter', filterVal);
  });

  // 第二个图库的筛选按钮事件
  $('#gallery2 .gallery2-controls button').on('click', function() {
    const filterVal = $(this).data('filter');
    gallery2.filterizr('filter', filterVal);
  });
});

这种方式更灵活，完全控制每个实例的筛选逻辑，不会有冲突。

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