如何将jQuery筛选代码改写为无i++语法的ES6原生JS实现

最终实现代码 #

const assetChoose = document.getElementById('asset-type-select');
const allAssetDivs = document.querySelectorAll('.asset-type div');

assetChoose.addEventListener('change', () => {
  const selectedType = assetChoose.value;
  // 全选情况：展示所有div
  if (selectedType === 'all') {
    allAssetDivs.forEach(div => div.classList.remove('hidden'));
    return
  }
  // 筛选情况：先隐藏所有，再展示匹配的项
  allAssetDivs.forEach(div => div.classList.add('hidden'));
  document.querySelectorAll(`.asset-type div[data-assettype="${selectedType}"]`)
    .forEach(div => div.classList.remove('hidden'));
});

说明 #

• 全部使用forEach遍历DOM节点，完全移除了i++形式的传统循环，符合ES6语法规范，也避免了eslint的no-plusplus规则报错
• 简化了下拉框选中值的获取逻辑：直接通过下拉元素的value属性即可拿到当前选中项的值，无需手动通过selectedIndex索引取值
• 逻辑和原jQuery版本完全对齐，如果你原有代码未生效可以优先排查两个点：
  • 确认div的data-assettype属性名和值完全正确，没有拼写错误
  • 确认hidden类的样式正确设置了display: none等隐藏规则

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