如何用jQuery在页面加载时按data-rel值设置默认筛选

常见问题原因 #

• DOM加载与筛选器初始化顺序冲突：手动默认选中逻辑可能在筛选器事件绑定完成前执行，导致触发无效。
• selectedClass修改未同步UI与筛选逻辑：仅修改变量值但未手动执行筛选、更新选中样式，或变量名与实际筛选逻辑依赖的不匹配。
• jQuery加载时机错误：如果jQuery在主JS之后加载，所有jQuery代码都会失效，无法完成筛选初始化。

解决步骤 #

方法一：初始化后手动触发选中 #

先完成筛选器事件绑定，再触发目标选项的点击事件，这是最稳妥的方式：

window.addEventListener('DOMContentLoaded', event => {
  // 1. 绑定筛选器点击事件
  $('.filter-option').on('click', function() {
    const targetRel = $(this).data('rel');
    // 执行内容筛选
    $('.work-item').hide().filter(`[data-category="${targetRel}"]`).show();
    // 更新选中样式
    $('.filter-option').removeClass('active');
    $(this).addClass('active');
  });

  // 2. 手动触发data-rel="web"的选项点击
  $('.filter-option[data-rel="web"]').trigger('click');
});

方法二：直接初始化筛选状态与UI #

如果不想模拟点击，可直接设置初始筛选状态并更新选中样式：

window.addEventListener('DOMContentLoaded', event => {
  const defaultRel = 'web';
  
  // 1. 初始化筛选内容
  $('.work-item').hide().filter(`[data-category="${defaultRel}"]`).show();
  // 2. 标记选中的筛选选项
  $(`.filter-option[data-rel="${defaultRel}"]`).addClass('active').siblings().removeClass('active');

  // 3. 绑定后续的筛选点击事件
  $('.filter-option').on('click', function() {
    const targetRel = $(this).data('rel');
    $('.work-item').hide().filter(`[data-category="${targetRel}"]`).show();
    $('.filter-option').removeClass('active');
    $(this).addClass('active');
  });
});

方法三：处理动态生成的筛选选项 #

如果筛选选项是AJAX加载等动态生成的，必须用事件委托绑定点击事件，否则初始绑定会失效：

window.addEventListener('DOMContentLoaded', event => {
  // 用事件委托绑定，兼容动态生成的元素
  $(document).on('click', '.filter-option', function() {
    const targetRel = $(this).data('rel');
    $('.work-item').hide().filter(`[data-category="${targetRel}"]`).show();
    $('.filter-option').removeClass('active');
    $(this).addClass('active');
  });

  // 若选项为AJAX加载，需将触发逻辑放在AJAX成功回调内
  $('.filter-option[data-rel="web"]').trigger('click');
});

关键检查点 #

• 确认jQuery的script标签在主JS之前加载，避免$ is not defined错误。
• 检查筛选选项的data-rel属性值是否为小写web，注意大小写敏感。
• 确认.active类是筛选器选中状态的样式类，与代码里的类名完全一致。

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