本文详解如何通过 `dataset` api 准确获取 html 元素的自定义 `data-value` 属性值，解决重复取值、误用 `.value` 等常见问题，并提供可立即运行的完整示例。
在 Web 开发中，常需为价格选项、配置项等列表元素添加点击交互，并读取其关联的数据值（如 data-value="250"）。初学者容易误用 e.target.value —— 但
✅ 正确做法是使用 element.dataset.xxx API：浏览器会自动将 data-value 映射为 dataset.value（驼峰命名规则：data-user-id → dataset.userId）。
以下是修复后的完整、健壮的实现代码：
- 20 ฿
- 50 ฿
- 100 ฿
- 250 ฿
const prices = document.querySelectorAll('.price');
prices.forEach(price => {
price.addEventListener('click', e => {
// 1. 移除所有 active 类（取消之前选中）
prices.forEach(el => el.classList.remove('active'));
// 2. 为当前点击项添加 active 类
e.target.classList.add('active');
// 3. ✅ 正确获取 data-value：使用 dataset.value
const currentValue = e.target.dataset.value;
console.log('当前选中金额（฿）:', currentValue); // 输出如 "250"
// ✅ 扩展建议：保存到变量/发送至后端/更新表单字段
// const selectedAmount = Number(currentValue); // 转为数字便于计算
});
});⚠️ 注意事项：
- ❌ 不要写 e.target.value ——
- 没有 value 属性，返回 undefined；
- ✅ 必须用 e.target.dataset.value（注意大小写：data-value → dataset.value）；
- ? dataset 是只读对象，修改它不会影响 HTML 属性（如需写入，请用 el.setAttribute('data-value', 'new')）；
- ? 若需兼容旧版 IE（
? 小技巧：你还可以在 CSS 中利用 active 类做视觉反馈，例如：
.price.active {
background-color: #007bff;
color: white;
font-weight: bold;
}总结：dataset 是操作自定义数据属性的标准、语义化且高性能的方式。掌握它，能让你更安全、清晰地管理 UI 状态与业务数据之间的映射关系。如需深入学习，推荐 MDN 官方文档：https://www.php.cn/link/b4c6c8bca8d88ac2274d91673368f08a
