点击切换显示/隐藏内容及图标，同页面多实例实现问题

原代码依赖固定ID和重复逻辑，导致同一页面只能运行单个实例。要实现多实例，得把代码改成基于元素关联而非固定ID的模式，同时合并冗余功能。

重构JavaScript逻辑 #

把两个功能重复的函数合并成一个通用函数，通过事件对象获取触发元素，再通过数据属性关联目标内容块，统一处理内容显示切换和图标状态：

function toggleContent(event) {
  event.preventDefault();
  const trigger = event.currentTarget;
  const targetEle = document.getElementById(trigger.dataset.target);
  const iconImg = trigger.querySelector('img');

  if (targetEle.style.display === 'block') {
    targetEle.style.display = 'none';
    iconImg.src = 'https://i.imgur.com/vKhOkQy.png';
    iconImg.alt = '显示内容';
    iconImg.title = '显示内容';
  } else {
    targetEle.style.display = 'block';
    iconImg.src = 'https://i.imgur.com/sqeimfN.png';
    iconImg.alt = '隐藏内容';
    iconImg.title = '隐藏内容';
  }
}

// 页面加载完成后批量绑定事件
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.content-toggle').forEach(toggle => {
    toggle.addEventListener('click', toggleContent);
  });
});

修改页面结构（支持多实例） #

每个实例用content-toggle类标记触发器，通过data-target属性关联对应内容块的唯一ID，不需要重复的固定ID：

<!-- 实例1 -->
<a href="#" class="content-toggle" data-target="contentDiv1">
  <img src="https://i.imgur.com/vKhOkQy.png" width="22px" 
       alt="显示内容" style="vertical-align: top;" title="显示内容" />
</a>
<div class="animatedParent animateOnce" style="display: inline-block; vertical-align:middle;">
  <div id="contentDiv1" class="animated bounceInRight" style="margin:5px; width: 354px; display: none">
    <div>隐藏内容1<br>
      <img src="https://i.imgur.com/iHcZrbo.png" alt="Power Fists!" style="vertical-align: top;" title="Power Fists!" />
    </div>        
  </div>
</div>

<!-- 实例2 -->
<a href="#" class="content-toggle" data-target="contentDiv2">
  <img src="https://i.imgur.com/vKhOkQy.png" width="22px" 
       alt="显示内容" style="vertical-align: top;" title="显示内容" />
</a>
<div class="animatedParent animateOnce" style="display: inline-block; vertical-align:middle;">
  <div id="contentDiv2" class="animated bounceInRight" style="margin:5px; width: 354px; display: none">
    <div>隐藏内容2<br>
      <img src="https://i.imgur.com/iHcZrbo.png" alt="Power Fists!" style="vertical-align: top;" title="Power Fists!" />
    </div>        
  </div>
</div>

核心改进点 #

• 用data-target替代硬编码的ID参数，每个实例独立关联自己的内容块，彻底避免ID冲突。
• 合并了原代码中重复的切换逻辑，减少冗余，统一处理内容显示和图标状态。
• 批量绑定事件，新增实例只需复制结构并修改内容块ID，无需修改JS代码。

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