本文详解如何通过 `dataset` api 准确获取被点击价格项的 `data-value` 值（如首次点击“20 ฿”得 `"20"`，后续点击“250 ฿”得 `"250"`），避免重复取值问题，并实现视觉状态同步。
在处理价格选项等单选交互时，常见误区是误用 e.target.value —— 但 <li> 元素没有原生 value 属性，因此 e.target.value 恒为 undefined，导致无法正确读取数据。正确方式是使用 HTML5 的自定义 data-* 属性配合 JavaScript 的 dataset API。
✅ 正确获取 data-value 的方法
将 data-value="20" 等属性写入 <li> 标签后，可通过 element.dataset.value 直接访问其值（注意：data- 前缀自动去除，连字符转驼峰，如 data-price-id → dataset.priceId）：
const prices = document.querySelectorAll('.price');
prices.forEach(price => {
price.addEventListener('click', e => {
// 清除所有 active 状态
prices.forEach(el => el.classList.remove('active'));
// 仅给当前点击项添加 active
e.target.classList.add('active');
// ✅ 正确获取 data-value 值（返回字符串，如 "20", "250"）
const currentValue = e.target.dataset.value;
console.log('当前选中金额：', currentValue); // 输出：20、250 等
// ✅ 可进一步用于表单提交、计算或状态更新
// 例如：document.getElementById('selectedAmount').value = currentValue;
});
});⚠️ 注意事项与最佳实践
- 不要用 e.target.value：<li> 是非表单元素，无 value 属性；若需兼容性兜底，可改用 e.target.getAttribute('data-value')，但 dataset.value 更语义化、更推荐。
-
确保 HTML 结构闭合：您原始代码中 <ul> 标签未正确闭合（嵌套 <ul> 缺少 </ul>），应修正为：
<ul class="money"> <li class="price" data-value="20">20 ฿</li> <li class="price" data-value="50">50 ฿</li> <li class="price" data-value="100">100 ฿</li> <li class="price" data-value="250">250 ฿</li> </ul> <!-- 正确闭合 -->
- 防重复绑定：若该脚本可能多次执行（如 SPA 页面复用），建议添加事件委托或检查是否已绑定，避免监听器叠加。
- 类型处理：dataset.value 返回字符串，如需数值运算，可用 Number(currentValue) 或 +currentValue 转换。
? 扩展建议：保存选中状态到全局变量
若需在其他函数中访问最新选中值，可声明一个响应式变量：
let selectedAmount = null;
prices.forEach(price => {
price.addEventListener('click', e => {
prices.forEach(el => el.classList.remove('active'));
e.target.classList.add('active');
selectedAmount = Number(e.target.dataset.value); // 实时更新
console.log('全局选中金额：', selectedAmount); // 输出：20, 250...
});
});掌握 dataset 是操作自定义数据属性的核心技能。更多细节可参考 MDN Web Docs - HTMLElement.dataset（权威中文文档，含兼容性与示例）。
