如何正确获取被点击元素的 data-value 值并实现单选高亮

本文详解如何通过 `dataset` api 准确获取 html 元素的自定义 `data-value` 属性值，解决重复取值、误用 `.value` 等常见问题，并提供可立即运行的完整示例。

在 Web 开发中，常需为价格选项、配置项等列表元素添加点击交互，并读取其关联的数据值（如 data-value="250"）。初学者容易误用 e.target.value —— 但 <li> 标签没有原生 value 属性，.value 返回 undefined，导致逻辑失效或静默错误。

✅ 正确做法是使用 element.dataset.xxx API：浏览器会自动将 data-value 映射为 dataset.value（驼峰命名规则：data-user-id → dataset.userId）。

以下是修复后的完整、健壮的实现代码：

<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>

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); // 转为数字便于计算
  });
});

⚠️ 注意事项：

PaperFake

AI写论文

下载

• ❌ 不要写 e.target.value —— <li> 没有 value 属性，返回 undefined；
• ✅ 必须用 e.target.dataset.value（注意大小写：data-value → dataset.value）；
• ? dataset 是只读对象，修改它不会影响 HTML 属性（如需写入，请用 el.setAttribute('data-value', 'new')）；
• ? 若需兼容旧版 IE（<11），可降级使用 getAttribute('data-value')，但现代项目推荐 dataset。

? 小技巧：你还可以在 CSS 中利用 active 类做视觉反馈，例如：

.price.active {
  background-color: #007bff;
  color: white;
  font-weight: bold;
}

总结：dataset 是操作自定义数据属性的标准、语义化且高性能的方式。掌握它，能让你更安全、清晰地管理 UI 状态与业务数据之间的映射关系。如需深入学习，推荐 MDN 官方文档：https://www.php.cn/link/b4c6c8bca8d88ac2274d91673368f08a