本文详解如何通过 DOM 遍历定位正确父容器，将每个商品卡片对应的专属表单准确加载到弹窗中，避免因作用域错误导致的 null 异常和表单复用问题。
本文详解如何通过 dom 遍历定位正确父容器，将每个商品卡片对应的专属表单准确加载到弹窗中，避免因作用域错误导致的 `null` 异常和表单复用问题。
在构建电商类或产品展示型页面时，常见需求是：点击“Uzmi sada”（立即获取）按钮后，弹出一个模态框（popup），并动态显示该商品专属的表单。但开发者常遇到两个核心问题：
- 表单内容总是取自第一个商品，其余卡片点击后显示相同内容；
- 控制台报错
Cannot read properties of null (reading 'innerHTML')，即querySelector返回null，说明目标元素未被正确找到。
根本原因在于 DOM 结构层级理解偏差：.portfolio-item-details 并非嵌套在 .contentBx（即 e.target.parentElement）内部，而是与 .card 同级、同属 .shopbox 容器。因此，使用 e.target.parentElement.querySelector('.portfolio-item-details') 必然失败——它在错误的作用域内查找。
✅ 正确解法：向上查找最近的共同父容器 .shopbox，再从中精准提取标题、价格及对应表单：
document.addEventListener("click", (e) => {
if (e.target.classList.contains("take")) {
togglePortfolioPopup();
document.querySelector(".portfolio-popup").scrollTo(0, 0);
// ✅ 关键修复：使用 closest() 定位外层 .shopbox 容器
portfolioItemDetails(e.target.closest(".shopbox"));
}
});Element.closest(selector) 方法会从当前元素开始，逐级向上查找匹配的祖先元素，完美适配本例中「按钮 → 卡片 → 商品区块」的嵌套结构。
完整修正后的逻辑函数如下：
function portfolioItemDetails(portfolioItem) {
// ✅ 从 .shopbox 中提取各字段（确保作用域正确）
const title = portfolioItem.querySelector(".naziv").textContent;
const points = portfolioItem.querySelector(".poeni").textContent;
const formHTML = portfolioItem.querySelector(".portfolio-item-details").innerHTML;
// ✅ 注入弹窗对应区域
document.querySelector(".pp-header h3").textContent = title;
document.querySelector(".pp-header p").textContent = points;
document.querySelector(".pp-body").innerHTML = formHTML;
}⚠️ 注意事项：
-
避免
innerHTML+textContent混用风险：若.naziv或.poeni内含 HTML 标签（如<strong></strong>），应统一用innerHTML；若仅为纯文本，推荐textContent防 XSS。 -
表单提交行为需重绑定：动态插入的表单中
<input>和<textarea></textarea>的required属性仍有效，但若后续需添加 JS 表单校验（如邮箱格式验证），应在portfolioItemDetails()执行后手动初始化，或使用事件委托监听.pp-body内的提交事件。 -
弹窗关闭逻辑优化：当前仅支持点击
.pp-inner关闭，建议补充「ESC 键关闭」和「点击遮罩层关闭」以提升用户体验：
// ESC 关闭
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && document.querySelector(".portfolio-popup").classList.contains("open")) {
togglePortfolioPopup();
}
});
// 点击遮罩层（.portfolio-popup）关闭，而非仅 .pp-inner
document.querySelector(".portfolio-popup").addEventListener("click", (e) => {
if (e.target === document.querySelector(".portfolio-popup")) {
togglePortfolioPopup();
}
});最终效果：每个 .shopbox 区块独立维护其表单与元数据，点击任意卡片的「Uzmi sada」按钮，弹窗均能准确显示该商品专属的名称、价格及完整表单，彻底解决复用与 null 报错问题。
