本文介绍如何通过 javascript 动态捕获用户选择的价格区间和功能组件（如 item x/y、e/z），并在提交后精准展示对应配置的弹窗，避免多弹窗冲突与硬编码问题。核心在于状态追踪、dom 动态更新与单一弹窗复用。
在实际开发中，为不同价格+配置组合维护多个独立弹窗（如 popup 和 popup__2）不仅冗余难维护，更易因函数重名（如重复定义 open__Popup()）导致逻辑覆盖——正如原代码中第二个 open__Popup() 覆盖了第一个，最终始终触发同一弹窗。
正确解法是：统一使用单个弹窗容器，通过 JavaScript 实时读取用户当前选择，并动态注入内容。 以下是完整实现方案：
✅ 步骤一：优化 HTML 结构（精简弹窗）
移除冗余的 popup__2，仅保留一个可复用的 .popup，并为关键数据单元添加语义化 ID，便于 JS 精准更新：
<!-- 替换原 popup 区域 -->
<div class="popup" id="popup">
<table class="table__1" id="tb_1">
<tr><td>item 1</td><td id="item1Container">—</td></tr>
<tr><td>item 2</td><td id="item2Container">—</td></tr>
<tr><td>Price Range</td><td id="priceRangeContainer">$2500 – $7500</td></tr>
</table>
<button type="button" class="close__btn" onclick="close__Popup()">Close</button>
</div>? 提示：id="item1Container" 等占位符将由 JS 实时填充，无需预设静态值。
✅ 步骤二：增强 JS 状态管理（无 jQuery 依赖版）
原答案引入了 jQuery，但纯原生 JS 同样简洁可靠。我们通过以下方式追踪用户选择：
- 价格范围：监听 .input-min 和 .input-max 的实时值
- 组件选择：利用 special__1/special__2 类名标识当前激活按钮
更新后的 open__Popup() 函数如下：
function open__Popup() {
// 获取价格范围
const minInput = document.querySelector('.input-min');
const maxInput = document.querySelector('.input-max');
const priceRangeText = `$${minInput.value} – $${maxInput.value}`;
document.getElementById('priceRangeContainer').textContent = priceRangeText;
// 获取选中的 item 1（.special__1 按钮的文本）
const selectedItem1 = document.querySelector('.special__1');
const item1Text = selectedItem1 ? selectedItem1.textContent.trim() : '—';
document.getElementById('item1Container').textContent = item1Text;
// 获取选中的 item 2（.special__2 按钮的文本）
const selectedItem2 = document.querySelector('.special__2');
const item2Text = selectedItem2 ? selectedItem2.textContent.trim() : '—';
document.getElementById('item2Container').textContent = item2Text;
// 显示弹窗
document.getElementById('popup').classList.add('open-Popup');
}
function close__Popup() {
document.getElementById('popup').classList.remove('open-Popup');
}✅ 步骤三：确保按钮选择逻辑健壮
原 JS 中按钮高亮逻辑正确，但需补充容错：当用户未点击任何按钮时，special__1/special__2 可能不存在，因此 querySelector() 返回 null —— 上述代码已通过三元运算符安全处理。
⚠️ 注意事项与最佳实践
- 避免函数重名：JavaScript 中同名函数声明会后者覆盖前者，务必为不同逻辑使用唯一函数名（如 openPopup1() / openPopup2()），或直接采用单一动态弹窗。
- CSS 复用性：.open-Popup 类应全局定义一次（非分别写在 .popup 和 .popup__2 中），确保样式统一且可维护。
- 无障碍友好：建议为弹窗添加 aria-modal="true" 和焦点管理（如打开时 focus() 到首个可交互元素），提升可访问性。
- 扩展性提示：若未来需根据价格区间 自动推荐 商品（如“$2000–$3000 推荐套餐 A”），可在 open__Popup() 中加入条件判断逻辑，动态渲染 <td> 内容或追加行。
✅ 总结
通过剥离静态弹窗、转为动态数据驱动，你不仅能解决当前“所有组合都显示同一弹窗”的问题，更能构建出可无限扩展的配置展示系统。核心思想就是：用状态代替模板，用逻辑代替复制。每次提交不再是“打开某个固定弹窗”，而是“渲染当前状态对应的视图”。
现在，无论用户选择 $3000–$5000 + item y + item z，还是 $1500–$2500 + item x + item e，弹窗都会精准呈现其真实选择——清晰、高效、无歧义。
