JS实现点击‘read in full’按钮将反馈内容插入模态窗问题

核心思路 #

点击「read in full」按钮时，先定位到当前按钮所属的反馈卡片，提取卡片里的用户头像、名称、反馈文本，再把这些内容替换到模态窗口的对应位置，最后显示模态窗。

修改后的代码实现 #

JavaScript 部分

// 获取所有按钮、模态窗容器、关闭按钮
const reviewsBtns = document.querySelectorAll(".reviews_link");
const reviewWindow = document.querySelector("#reviews_window");
const reviewWrap = document.querySelector("#reviews_wrap");
const closeBtn = document.getElementById("closeButtonreviews");

// 给每个按钮绑定点击事件
reviewsBtns.forEach(btn => {
  btn.addEventListener("click", openReviews);
});

function openReviews(event) {
  // 找到当前点击按钮所属的卡片容器
  const currentCard = event.target.closest(".reviews_box");
  
  // 从卡片里提取需要的内容
  const userName = currentCard.querySelector(".reviews__name").textContent;
  const userAvatar = currentCard.querySelector(".reviews_name img").src;
  const reviewText = currentCard.querySelector(".reviews_text").textContent;
  
  // 替换模态窗里的内容
  reviewWrap.querySelector(".modal-avatar").src = userAvatar;
  reviewWrap.querySelector(".modal-name").textContent = userName;
  reviewWrap.querySelector(".modal-text").textContent = reviewText;
  
  // 显示模态窗
  reviewWindow.classList.add("reviews_window");
  reviewWrap.classList.add("reviews_wrap");
}

// 关闭模态窗
closeBtn.addEventListener("click", () => {
  reviewWindow.classList.remove("reviews_window");
  reviewWrap.classList.remove("reviews_wrap");
});

HTML 部分

给模态窗里的元素添加专属类名，方便后续获取和修改：

<!-- 轮播卡片示例 -->
<div class="swiper-slide">
  <div class="reviews_box">
    <div class="reviews_name">
      <img src="img/A.svg" alt="Reviews">
      <p class="reviews__name">Гоар</p>
    </div>
    <p class="reviews_text">这里是完整的反馈内容，点击按钮会显示到模态窗里</p>
    <button type="button" class="reviews_link">read in full</button>
  </div>
</div>

<!-- 模态窗 -->
<div id="reviews_window">
  <div id="reviews_wrap">
    <div class="reviews_name">
      <img class="modal-avatar" src="img/d-reviews.svg" alt="Reviews">
      <p class="modal-name">Jonh</p>
    </div>
    <p class="modal-text">...</p>
    <button type="button" id="closeButtonreviews" class="reviews_close"></button>
  </div>
</div>

关键说明 #

• 用event.target.closest(".reviews_box")精准定位当前按钮所在的卡片，只要这个类名不变，就算卡片结构微调也能正常获取内容。
• 给模态窗元素加专属类名，既避免和其他元素选择器冲突，也让代码逻辑更清晰。
• 用forEach遍历按钮比for...of更贴合现代JS写法，还能避免全局变量泄漏问题。

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