JavaScript如何根据ID控制单个元素显隐 避免点击按钮全部展开

现有代码的问题 #

• 核心逻辑错误：判断条件中错误使用赋值运算符=代替比较运算符，且每次触发函数都会遍历所有条目统一修改状态，传入的id参数完全没有被使用，自然会导致所有条目同时展开。
• 设计冗余：不需要提前构建所有元素ID的数组，既然点击时已经能拿到对应条目的ID，直接操作对应元素即可。

最简实现方案 #

如果你保留现有spellContent{id}、showMoreButton{id}、showLessButton{id}的ID命名规则，只需要把函数修改为如下内容即可：

function showSpellInfo(id) {
  // 直接定位对应ID的三个元素，无需遍历全部条目
  document.getElementById(`showMoreButton${id}`).style.display = "none";
  document.getElementById(`showLessButton${id}`).style.display = "inline-block";
  document.getElementById(`spellContent${id}`).style.display = "block";
}

对应的收起函数可以用同样的逻辑实现：

function hideSpellInfo(id) {
  document.getElementById(`showMoreButton${id}`).style.display = "inline-block";
  document.getElementById(`showLessButton${id}`).style.display = "none";
  document.getElementById(`spellContent${id}`).style.display = "none";
}

更优雅的优化方案 #

你可以直接用单个按钮实现切换效果，不需要拆分显示更多/显示更少两个按钮，同时用事件委托适配动态生成的条目：

1. 首先给所有切换按钮加统一的类名spell-toggle，并通过自定义属性data-id绑定对应条目的ID，按钮和内容区的结构示例如下：

<!-- 条目示例 -->
<div class="spell-item">
  <p>条目基础信息</p>
  <button class="spell-toggle" data-id="1">显示更多</button>
  <div class="spell-content" id="spellContent1" style="display:none;">
    条目详情内容
  </div>
</div>

2. 全局只需要绑定一次事件即可，后续动态新增的条目不需要重新绑定：

document.addEventListener('click', e => {
  // 只响应切换按钮的点击事件
  if (!e.target.classList.contains('spell-toggle')) return
  const id = e.target.dataset.id
  const content = document.getElementById(`spellContent${id}`)
  const isContentHidden = content.style.display === 'none' || content.style.display === ''

  content.style.display = isContentHidden ? 'block' : 'none'
  e.target.textContent = isContentHidden ? '收起' : '显示更多'
})

这种方案完全不需要提前维护各种ID数组，代码量更少，适配动态渲染的场景也更方便。

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