如何选中HTML页面所有ID元素？代码仅首个元素生效

• 核心问题：HTML规范要求ID必须唯一，你重复使用id="cardText"是错误的。浏览器的getElementById、querySelector等方法只会返回第一个匹配该ID的元素，这就是为什么只有第一个卡片的功能生效。
• 修复步骤：

首先修正HTML，把重复的id="cardText"替换为class="cardText"（class可重复使用）：

<card class="card mx-auto">
  <div class="card-body">
    <p class="card-title h5">Lorem ipsum dolor sit amet.</p>
    <p class="card-text d-inline cardText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum ea libero expedita debitis dolorum quos non ad sit, impedit dolore aliquam sed rerum dolorem nam provident iusto voluptatum, neque corrupti amet aliquid a rem alias quisquam pariatur! Quae consequatur minima obcaecati iusto eos blanditiis deleniti?</p>
    <button class="btn float-end">
      <img width="25px" class="d-none plusIcon" src="https://www.iconpacks.net/icons/1/free-plus-icon-321-thumb.png" alt="">
    </button>
    <button class="btn float-end">
      <img width="25px" class="minusIcon" src="https://www.iconpacks.net/icons/2/free-minus-icon-3108-thumb.png" alt="">
    </button>
  </div>
</card>
<!-- 其余两张卡片做同样修改，将id="cardText"改为class="cardText" -->

方案1：遍历每个卡片绑定事件 #

适合元素数量较少的场景，逐个处理每张卡片的交互：

// 获取所有卡片元素
const cards = document.querySelectorAll('.card');

cards.forEach(card => {
  // 在当前卡片内查找对应的元素
  const plusIcon = card.querySelector('.plusIcon');
  const minusIcon = card.querySelector('.minusIcon');
  const cardText = card.querySelector('.cardText');

  // 绑定减号按钮事件
  minusIcon.addEventListener('click', () => {
    plusIcon.classList.remove('d-none');
    cardText.classList.add('d-none');
    minusIcon.classList.add('d-none');
  });

  // 绑定加号按钮事件
  plusIcon.addEventListener('click', () => {
    minusIcon.classList.remove('d-none');
    cardText.classList.remove('d-none');
    plusIcon.classList.add('d-none');
  });
});

方案2：事件委托（更高效） #

利用事件冒泡机制，只给父元素绑定一次事件，自动处理所有子元素的交互，适合大量元素的场景：

// 给所有卡片的共同父级绑定事件（这里用body，也可以用更贴近的容器元素）
document.body.addEventListener('click', (e) => {
  // 找到点击元素所在的卡片容器
  const cardBody = e.target.closest('.card-body');
  if (!cardBody) return; // 不是卡片内的点击，直接返回

  // 在当前卡片容器内查找元素
  const plusIcon = cardBody.querySelector('.plusIcon');
  const minusIcon = cardBody.querySelector('.minusIcon');
  const cardText = cardBody.querySelector('.cardText');

  // 判断点击的是哪个图标
  if (e.target.classList.contains('minusIcon')) {
    plusIcon.classList.remove('d-none');
    cardText.classList.add('d-none');
    minusIcon.classList.add('d-none');
  } else if (e.target.classList.contains('plusIcon')) {
    minusIcon.classList.remove('d-none');
    cardText.classList.remove('d-none');
    plusIcon.classList.add('d-none');
  }
});

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