求助：实现诗歌Div显隐切换及按钮文本切换时变量出现问题

问题分析 #

你的代码存在几个核心问题：

• 事件监听的回调参数selection是事件对象（Event），不是你要操作的诗歌DOM元素，这直接遮蔽了外部的selection变量，导致所有样式操作都指向事件对象而非诗歌元素，完全无效。
• document.querySelector(".poem")仅获取页面中第一个匹配的诗歌元素，当有多个诗歌项时，所有按钮都会控制同一个诗歌，无法实现列表项各自独立的切换。
• 直接判断element.style.display不可靠：如果初始隐藏状态是通过外部CSS设置的（而非内联样式），element.style.display会返回空字符串，导致判断逻辑失效。

修正方案 #

我们用CSS类来控制显示/隐藏状态，同时让每个按钮关联对应的诗歌元素，确保每个按钮只操作自己所属的诗歌项：

HTML结构示例 #

假设你的页面结构是这样的（如果不符可以调整元素关联逻辑）：

<section class="poem-item">
  <button class="btn">Read</button>
  <div class="poem hidden">
    <!-- 诗歌内容和图片 -->
    <p>白日依山尽，黄河入海流...</p>
    <img src="poem1.jpg" alt="诗歌配图">
  </div>
</section>
<section class="poem-item">
  <button class="btn">Read</button>
  <div class="poem hidden">
    <p>床前明月光，疑是地上霜...</p>
    <img src="poem2.jpg" alt="诗歌配图">
  </div>
</section>

CSS样式 #

用类来控制显示隐藏，比直接操作内联样式更灵活：

.hidden {
  display: none;
}
.poem {
  margin-top: 10px;
}

JavaScript代码 #

const buttons = document.querySelectorAll(".btn");

buttons.forEach((btn) => {
  btn.addEventListener("click", () => {
    // 找到当前按钮对应的诗歌元素（根据HTML结构调整，这里用parentNode找父容器下的.poem）
    const poem = btn.closest(".poem-item").querySelector(".poem");
    
    // 切换隐藏类
    poem.classList.toggle("hidden");
    
    // 根据诗歌的显示状态切换按钮文本
    btn.textContent = poem.classList.contains("hidden") ? "Read" : "Close";
  });
});

关键改进点 #

• 移除了事件回调中遮蔽变量的参数，直接通过btn.closest()找到当前按钮所属的诗歌容器，再定位到对应的诗歌元素，确保每个按钮操作自己的诗歌项。
• 使用classList.toggle()切换隐藏类，简化代码逻辑，同时兼容初始状态由CSS设置的场景。
• 根据诗歌元素是否包含hidden类来切换按钮文本，判断逻辑更可靠。

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