两处独立Div的Isotope显示切换功能异常，脚本相互干扰求助

嘿，我明白你遇到的麻烦了——用两个Div调用Isotope脚本时，先是只有第一个生效，复制脚本修改后，第二个Div的操作居然会影响第一个的状态，这确实挺闹心的。

问题根源 #

这种情况大多是因为变量名重复或者事件绑定没有区分容器导致的：

• 你可能两次都用了$container这个变量，后面的实例直接覆盖了前面的，导致两个容器共用了同一个Isotope实例状态
• 筛选按钮的事件绑定没有精准对应到各自的容器，点击第二个按钮时，事件触发了两个实例的筛选操作

解决方案：给每个容器创建独立的Isotope实例 #

你需要给两个容器分配独立的变量，并且给对应的筛选按钮加上独特的标识，确保操作只作用于目标容器。

步骤1：给容器和按钮添加唯一标识

假设你的HTML结构是这样的（可根据实际情况调整类名/ID）：

<!-- 第一个容器 -->
<div class="cat-area">
  <div class="posts">
    <div class="itemat htileone">内容1</div>
    <div class="itemat htiltwo">内容2</div>
  </div>
  <div id="filter-tile-one">
    <button data-filter=".htileone">筛选1</button>
    <button data-filter=".htiltwo">筛选2</button>
  </div>
</div>

<!-- 第二个容器 -->
<div class="dog-area">
  <div class="posts">
    <div class="itemat htileone">内容A</div>
    <div class="itemat htiltwo">内容B</div>
  </div>
  <div id="filter-tile-two">
    <button data-filter=".htileone">筛选A</button>
    <button data-filter=".htiltwo">筛选B</button>
  </div>
</div>

步骤2：修改JS代码，初始化独立实例

把你的main.js改成下面这样，每个容器用独立的变量，事件绑定对应各自的按钮：

// 初始化第一个Isotope容器
var $container1 = $('.cat-area .posts').isotope({
  itemSelector: '.itemat',
  isFitWidth: true,
  columnWidth: '.col-sm-3'
});
// 设置第一个容器的默认筛选
$container1.isotope({ filter: '.htileone' });

// 初始化第二个Isotope容器
var $container2 = $('.dog-area .posts').isotope({
  itemSelector: '.itemat',
  isFitWidth: true,
  columnWidth: '.col-sm-3'
});
// 设置第二个容器的默认筛选（可根据需求修改）
$container2.isotope({ filter: '.htileone' });

// 第一个容器的筛选按钮事件
$('#filter-tile-one').on('click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $container1.isotope({ filter: filterValue });
});

// 第二个容器的筛选按钮事件
$('#filter-tile-two').on('click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $container2.isotope({ filter: filterValue });
});

额外注意事项 #

• 如果两个容器的布局参数（比如columnWidth）不一样，一定要分别设置，不要共用同一个配置
• 确保容器的选择器是唯一的，避免jQuery一次选中多个元素
• 如果你的筛选按钮用的是类名而不是ID，记得用父容器来限定范围，比如$('.cat-area .filter-button').on(...)，这样就不会和另一个容器的按钮混淆

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