JavaScript如何通过data-slug属性匹配元素并触发点击操作

你可以直接使用CSS属性选择器匹配对应data-slug值的元素，完整实现逻辑如下：

// 页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 这里是通用获取URL参数的写法，如果你已经拿到slug参数可以直接给targetSlug赋值
  const urlParams = new URLSearchParams(window.location.search);
  const targetSlug = urlParams.get('slug'); // 若你的参数名不是slug可自行修改

  // 精准匹配对应data-slug的筛选按钮
  const targetFilter = document.querySelector(`.jet-portfolio__filter-item[data-slug="${targetSlug}"]`);

  // 元素存在时才触发点击，避免无匹配slug时报错
  if (targetFilter) {
    targetFilter.click();
  }
});

关键说明 #

• 用querySelector结合类名+[data-slug="目标值"]的属性选择器，不需要元素设置id就能精准定位到目标筛选按钮
• 逻辑包裹在DOMContentLoaded事件回调中，是为了确保页面筛选按钮已经渲染完成再执行查找，避免出现找不到元素的问题
• 如果你的筛选按钮是异步加载渲染的（比如接口返回数据后才生成筛选项），需要把上述逻辑放到筛选按钮渲染完成的回调中执行，也可以用MutationObserver监听元素渲染后再执行操作

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