✅ 正确做法是使用 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./link/b4c6c8bca8d88ac2274d91673368f08a