✅ 正确获取 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 ฿
   

• 防重复绑定：若该脚本可能多次执行（如 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（权威中文文档，含兼容性与示例）。