点击价格选项时获取单一选中值的问题求助（解决currentValue多次存储的问题）

Hey there! Let's work through why you're having issues with currentValue seeming to store multiple values, and fix it up step by step.

问题根源分析 #

Looking at your code, there are two key issues that are causing this confusion:

1. 变量作用域问题：你把currentValue定义在click事件的回调函数内部。这意味着每次点击价格选项时，都会创建一个全新的currentValue局部变量。如果后续你想在回调外部使用选中的值，根本拿不到统一的结果，反而会因为每次点击都生成新变量，看起来像是“多次存储”。
2. 取值方式错误：你的HTML里用data-value属性存储价格，但代码中用了e.target.value——<li>不是输入类表单元素，没有原生的value属性，所以你其实根本没拿到正确的价格值，这也会让你对变量的存储状态产生误解。

修复后的代码方案 #

我们可以调整变量作用域，同时修正取值逻辑，让currentValue始终只存储当前选中的单一值：

// 把currentValue提升到外部作用域，确保它是一个可全局更新的变量
let currentValue = '';

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属性的值
    currentValue = e.target.dataset.value;
    // 可以在这里验证：每次点击只会输出当前选中的单一值
    console.log('当前选中价格：', currentValue);
  });
});

关键修改说明 #

• 调整作用域：将currentValue声明在事件监听的外部，这样它就成为了一个可被持续更新的变量——每次点击只会覆盖它的内容，而不是创建新变量，确保它始终只保存当前选中的那一个值。
• 修正取值逻辑：用e.target.dataset.value替代e.target.value，因为<li>的自定义属性data-value需要通过dataset对象才能正确读取。

如果你的需求只是在点击时处理当前选中的值（不需要在外部使用），那其实每次点击时的currentValue本来就是单一的——可能你是误解了“多次存储”的含义，比如是否在回调里重复执行了处理逻辑？如果是这样，确保每次点击只执行一次目标逻辑即可。

备注：内容来源于stack exchange，提问作者MACOIL