如何编写通用JavaScript函数实现点击Div切换其子元素可见性？

核心错误点 #

• ID重复问题：HTML中多个Div使用了相同的id="Section"和id="click-image"，ID是页面唯一标识，重复会导致JS无法准确定位元素，需改为class。
• JS逻辑错误：
  • document.getElementById('Section')只会获取第一个匹配的Div，无法定位当前点击的元素；
  • children[0]选中的是Div内的h6标签，而非目标的.popuptext段落；
  • classlist拼写错误，正确写法是classList。
• CSS选择器错误：.popuptext .show表示选中.popuptext内部的.show元素，正确应该是.popuptext.show，表示同时拥有这两个类的元素。

修正后的完整代码 #

1. HTML代码（修正ID为Class，传递当前点击元素） #

<div class="section" onclick="portfolio(this)">
  <h6 class="number">2. Stand Up Jetski</h6>
  <img src="../resources/images/icons8-paper-ship-100.png" 
       alt="Brake Disc" 
       class="click-image">
  <p class="popuptext" id="jetski-text">  random </p>
</div>
<div class="section" onclick="portfolio(this)">
  <h6 class="number">3. PC build</h6>
  <img src="../resources/images/icons8-workstation-100.png" 
       alt="Brake Disc" 
       class="click-image">
  <p class="popuptext" id="pc-text"> random  </p>
</div>

2. JavaScript代码（通用函数，定位当前点击元素的子元素） #

//Portfolio Pop ups//
function portfolio(clickedDiv) {
  // 在点击的Div内查找带popuptext类的段落
  const popupText = clickedDiv.querySelector('.popuptext');
  // 切换show类，实现可见性切换
  popupText.classList.toggle('show');
}

3. CSS代码（修正选择器，确保弹窗显示在最上层） #

.popuptext {
  border      : 1px solid var(--black);
  z-index     : 100;
  position    : absolute;
  left        : 50%;
  top         : 50%;
  margin-left : -500px;
  margin-top  : -50px;
  height      : 1000px;
  width       : 1000px;
  visibility  : hidden;
}
/* 当popuptext元素拥有show类时，切换可见性 */
.popuptext.show {
  visibility : visible;
}

进阶优化：事件委托（推荐） #

如果不想给每个Div绑定onclick属性，可以用事件委托实现更简洁的写法：

优化后的HTML（移除onclick） #

<div class="section">
  <h6 class="number">2. Stand Up Jetski</h6>
  <img src="../resources/images/icons8-paper-ship-100.png" 
       alt="Brake Disc" 
       class="click-image">
  <p class="popuptext" id="jetski-text">  random </p>
</div>
<div class="section">
  <h6 class="number">3. PC build</h6>
  <img src="../resources/images/icons8-workstation-100.png" 
       alt="Brake Disc" 
       class="click-image">
  <p class="popuptext" id="pc-text"> random  </p>
</div>

优化后的JavaScript #

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  // 监听全局点击事件
  document.addEventListener('click', function(e) {
    // 判断点击的元素是否在.section内部
    const targetSection = e.target.closest('.section');
    if (targetSection) {
      // 找到该Section内的popuptext元素并切换类
      const popupText = targetSection.querySelector('.popuptext');
      popupText.classList.toggle('show');
    }
  });
});

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