本文详解如何通过 `dataset` api 准确获取被点击价格项的 `data-value` 值（如首次点击“20 ฿”得 `"20"`，后续点击“250 ฿”得 `"250"`），避免重复取值问题，并实现视觉状态同步。
在处理价格选项等单选交互时，常见误区是误用 e.target.value —— 但
✅ 正确获取 data-value 的方法
将 data-value="20" 等属性写入
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：
- 是非表单元素，无 value 属性；若需兼容性兜底，可改用 e.target.getAttribute('data-value')，但 dataset.value 更语义化、更推荐。
-
确保 HTML 结构闭合：您原始代码中
- 标签未正确闭合（嵌套
- 缺少
- 20 ฿
- 50 ฿
- 100 ฿
- 250 ฿
? 扩展建议：保存选中状态到全局变量
若需在其他函数中访问最新选中值，可声明一个响应式变量：
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（权威中文文档，含兼容性与示例）。
