多ccontainer容器下Showmore按钮按高度隐藏失效问题求助

现有代码的核心问题 #

1. querySelector仅获取第一个元素：不管是容器还是按钮，querySelector只会返回页面中第一个匹配的元素，无法处理多组结构。
2. 重复使用ID：ID是页面唯一标识，不能给多个容器设置相同的id="ccontainer"，否则只会选中第一个。
3. 容器与按钮无关联：代码没有建立每组容器和对应按钮的绑定关系，导致所有按钮都用第一个容器的高度判断。

修正后的代码 #

HTML（修正重复ID问题）

<!-- 第一组 -->
<div class="ccontainer">
  <p> content </p>
  <div class="img">
    <img src="images/image2.jpg">
  </div>
  <p> content </p>
</div>
<button class="showmore"> show more </button>

<!-- 第二组 -->
<div class="ccontainer">
  <p> another content </p>
  <div class="img">
    <img src="images/image3.jpg">
  </div>
  <p> another content </p>
</div>
<button class="showmore"> show more </button>

JavaScript（修复遍历与关联逻辑）

// 显示/隐藏showmore按钮
const containers = document.querySelectorAll('.ccontainer');
const buttons = document.querySelectorAll('.showmore');

// 遍历每组容器，关联对应位置的按钮
containers.forEach((container, index) => {
  const targetBtn = buttons[index];
  const containerHeight = container.clientHeight;
  // 按需求：容器高度小于550px时隐藏按钮
  targetBtn.style.display = containerHeight < 550 ? 'none' : '';
});

关键修正点 #

• 用querySelectorAll替代querySelector，获取页面中所有匹配的容器和按钮，返回可遍历的NodeList。
• 遍历容器时通过索引index绑定同位置的按钮，确保每组容器和按钮一一对应。
• 移除重复ID，改用类名统一选择元素，符合HTML规范。
• 简化判断逻辑，用三元运算符实现条件赋值，代码更简洁。

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