如何用Javascript的forEach优化多按钮显隐元素的冗余代码

你遇到的opencard.forEach is not a function报错，核心是this.getAttribute("opencard")获取到的是字符串类型的选择器值（例如.full-card-campfer），并非DOM元素集合，本身不具备forEach遍历方法，需要先通过该选择器查询到对应的目标元素集合后再做展示操作。

JavaScript 部分 #

const squares = document.querySelectorAll('.table-of-contents-college-all label');
const allwoodcards = document.querySelectorAll('.all-wood-cards'); 

squares.forEach(square => {
  square.addEventListener('click', clickOutcome)
})

function clickOutcome() {
  // 拿到选择器字符串
  const targetSelector = this.getAttribute("opencard");
  // 先关闭所有卡片
  allwoodcards.forEach(woodcard => {
    woodcard.style.display = "none"
  });
  // 通过选择器查询到当前要展示的3个卡片，再遍历设置展示
  document.querySelectorAll(targetSelector).forEach(openup => {
    openup.style.display = "block";
  });
}

HTML 注意事项 #

你提供的示例HTML中部分.full-card-pine标签没有闭合，实际使用时请补全闭合标签避免样式/选择器异常：

<body>
   <div class="tableofcontentscollege1 table-of-contents-college-all">
            <label  type="button" 
                    id="campfer-table-button"
                    opencard=".full-card-campfer"
                    >
                    Campfer
            </label>
            <label  type="button"
                    opencard=".full-card-pine"
                    >
                    Pine
            </label>
   </div>
   <div class="full-card-campfer all-wood-cards"
        id="campferfullcard1">
   </div>
   <div class="full-card-campfer all-wood-cards"
        id="campferfullcard2">
   </div>
   <div class="full-card-campfer all-wood-cards"
        id="campferfullcard3">
   </div>
   <!-- 补全闭合标签 -->
   <div class="full-card-pine all-wood-cards"
        id="pinefullcard1">
   </div>
   <div class="full-card-pine all-wood-cards"
        id="pinefullcard2">
   </div>
   <div class="full-card-pine all-wood-cards"
        id="pinefullcard3">
   </div>
</body>

如果需要符合HTML规范，建议把自定义的opencard属性改为data-opencard，读取时用this.dataset.opencard即可，避免自定义属性不符合标准带来的潜在问题。

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