如何用纯JS获取点击元素ID，实现点击图标无需单独函数联动显示？

当然可以实现，但你当前写的代码里有个小坑需要修正——直接用this.id在内联事件绑定的方式下拿不到正确的元素ID哦！

为什么原来的代码会出问题？ #

当你用<p onclick="expand()">这种内联方式绑定事件时，函数expand()内部的this指向的是全局对象（浏览器里就是window），不是触发点击的那个<p>元素。所以this.id会返回undefined，拼出来的blockundefined自然找不到对应的div，功能就失效了。

解决方案1：修改内联调用，传递当前元素 #

我们可以把触发事件的元素作为参数传给expand函数，这样就能拿到正确的ID了：

<!-- 修改onclick，把当前元素传进去 -->
<p onclick="expand(this)" id="i1">icon1</p>
<p onclick="expand(this)" id="i2">icon2</p>
<p onclick="expand(this)" id="i3">icon3</p>

<!-- 给内容块加初始隐藏样式 -->
<div id="blocki1" style="display: none;">对应icon1的内容</div>
<div id="blocki2" style="display: none;">对应icon2的内容</div>
<div id="blocki3" style="display: none;">对应icon3的内容</div>

<script>
function expand(element) {
  // 通过传入的元素拿到ID，拼接出对应内容块的ID
  const targetBlock = document.getElementById("block" + element.id);
  // 切换显示状态：隐藏就显示，显示就隐藏
  targetBlock.style.display = targetBlock.style.display === "none" ? "block" : "none";
}
</script>

解决方案2：用事件委托（更优雅的方式） #

如果不想写内联事件，推荐用事件委托——只给父元素绑定一次事件，就能处理所有子元素的点击，代码更简洁，也方便后续新增图标：

<!-- 给图标加个父容器 -->
<div class="icon-group">
  <p id="i1">icon1</p>
  <p id="i2">icon2</p>
  <p id="i3">icon3</p>
</div>

<div id="blocki1" style="display: none;">对应icon1的内容</div>
<div id="blocki2" style="display: none;">对应icon2的内容</div>
<div id="blocki3" style="display: none;">对应icon3的内容</div>

<script>
// 给父容器绑定点击事件
document.querySelector('.icon-group').addEventListener('click', function(e) {
  // 确保点击的是我们的图标p元素
  if (e.target.tagName === 'P') {
    const targetBlock = document.getElementById("block" + e.target.id);
    targetBlock.style.display = targetBlock.style.display === "none" ? "block" : "none";
  }
});
</script>

两种方案都能实现“点击不同图标，不用写多个函数就展示对应内容”的需求，第二种事件委托的方式更符合现代前端的编码习惯哦！

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