页面加载时用Shuffle.js默认选中Fruit按钮筛选图片的问题

嘿，我之前也踩过这个坑！你说得对，只给按钮加active或checked属性只是搞定了视觉上的选中状态，但Shuffle并不会自动识别这个初始状态来执行筛选——它需要你手动调用筛选方法才行。

下面是具体的解决步骤：

1. 确保保存Shuffle实例 #

初始化Shuffle的时候，一定要把实例存到变量里，这样后面才能调用它的方法：

var Shuffle = window.Shuffle;
// 初始化时保存实例到myShuffle变量
var myShuffle = new Shuffle(document.getElementById('your-grid-id'), {
  itemSelector: '.your-image-item-class', // 替换成你的图片项选择器
  // 其他配置项（比如sizer）按需添加
});

2. 页面加载后手动触发筛选 #

在页面DOM加载完成后，我们要做两件事：给"Fruit"按钮加上active类，然后调用Shuffle的filter()方法执行筛选：

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
  // 找到Fruit筛选按钮（假设你的按钮有data-filter="fruit"属性）
  const fruitFilterBtn = document.querySelector('[data-filter="fruit"]');
  
  if (fruitFilterBtn) {
    // 先移除其他筛选按钮的active类（保持Bootstrap按钮组的视觉一致性）
    document.querySelectorAll('.filter-button-class').forEach(btn => btn.classList.remove('active'));
    // 给Fruit按钮添加active类
    fruitFilterBtn.classList.add('active');
    // 关键一步：调用Shuffle的filter方法，传入分类值
    myShuffle.filter('fruit');
  }
});

关键说明 #

• Shuffle的筛选逻辑完全依赖filter()方法触发，视觉上的按钮选中状态和筛选逻辑是分离的，所以必须手动调用方法
• 要确保你的图片项的分类类名和filter()传入的值一致，比如图片项有class="image-item fruit"，那筛选值就是fruit
• 如果你的按钮用的是Bootstrap的btn-group，记得同步移除其他按钮的active类，保持UI一致性

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