使用Handlebars JS与MySQL生成多卡片，仅首个按钮生效问题求助

这个问题我之前也遇到过，核心原因是DOM元素的唯一性和事件绑定的关联性没处理好，给你两个靠谱的解决方案：

问题根源先理清楚 #

• 用ID调用按钮：DOM里ID是唯一标识，getElementById只会匹配第一个元素，后面的按钮根本没绑定到事件上，自然没反应。
• 直接用类绑定事件：如果只是简单给所有同类按钮加点击事件，没有关联到对应的卡片容器，点击时会触发所有同类型的"更多信息"元素，就出现了全动的情况。

方案一：事件委托（推荐，适配动态渲染场景） #

把点击事件绑定到所有卡片的父容器上，通过事件冒泡来判断点击的是哪个按钮，再精准操作对应卡片里的内容。这种方式不管卡片是静态渲染还是后续动态添加的，都能生效，而且性能更好。

第一步：调整Handlebars模板结构 #

给按钮加个标识类，同时给"更多信息"模块加个隐藏类：

<div class="cards-wrapper">
  {{#each yourDataList}}
    <div class="card-item">
      <!-- 卡片基础内容 -->
      <h3>{{title}}</h3>
      <p>{{summary}}</p>
      <!-- 显示更多按钮 -->
      <button class="toggle-more-btn">查看更多</button>
      <!-- 更多信息模块，默认隐藏 -->
      <div class="card-more-info hidden">
        <p>{{detail}}</p>
        <p>{{otherInfo}}</p>
      </div>
    </div>
  {{/each}}
</div>

CSS里加个隐藏类：

.hidden { display: none; }

第二步：JS绑定事件委托 #

// 绑定到父容器，不用给每个按钮单独加事件
document.querySelector('.cards-wrapper').addEventListener('click', function(e) {
  // 判断点击的是"查看更多"按钮
  if (e.target.classList.contains('toggle-more-btn')) {
    // 找到当前按钮所属的卡片容器
    const currentCard = e.target.closest('.card-item');
    // 找到卡片里的"更多信息"模块
    const moreInfo = currentCard.querySelector('.card-more-info');
    // 切换显示/隐藏状态
    moreInfo.classList.toggle('hidden');
    // 也可以顺便改按钮文字，比如"收起"
    e.target.textContent = moreInfo.classList.contains('hidden') ? '查看更多' : '收起';
  }
});

方案二：渲染完成后逐个绑定事件（适合静态渲染场景） #

如果你的卡片是一次性渲染完成，不会动态新增，可以等Handlebars渲染完成后，给每个按钮单独绑定事件，同时关联对应的卡片：

// 确保DOM渲染完成后执行（比如放在Handlebars渲染代码之后）
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有"查看更多"按钮
  const moreButtons = document.querySelectorAll('.toggle-more-btn');
  
  moreButtons.forEach(btn => {
    btn.addEventListener('click', function() {
      // 通过当前按钮找到所属卡片
      const card = this.closest('.card-item');
      const moreInfo = card.querySelector('.card-more-info');
      moreInfo.classList.toggle('hidden');
      // 按钮文字切换
      this.textContent = moreInfo.classList.contains('hidden') ? '查看更多' : '收起';
    });
  });
});

额外技巧：用data属性精准定位 #

如果需要更精准的关联，还可以在Handlebars里给每个"更多信息"模块加唯一ID，按钮用data属性存对应的ID：

<button class="toggle-more-btn" data-target="more-{{id}}">查看更多</button>
<div id="more-{{id}}" class="card-more-info hidden">...</div>

然后JS里通过dataset.target获取ID来操作：

// 事件委托里的逻辑改成
const targetId = e.target.dataset.target;
const moreInfo = document.getElementById(targetId);
moreInfo.classList.toggle('hidden');

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