价格页点年付，按钮下面的数字没动，还是月付的三十九，只有旁边小字变了，用户以为年付也是这个价。点两次才确认自己没看错。乍看像缓存或者权限的锅，追下去往往不是。
document.addEventListener('click', (e) => {
const el = e.target.closest('[data-plan]');
if (!el) return;
document.querySelector('.price').textContent = el.dataset.price;
document.querySelector('#plan').value = el.dataset.plan; });
追下去是这么回事：切换只改了选中样式和说明文案，价格节点没有重新赋值。价格数据存在按钮的 data 属性里，读取时取的却是第一个套餐。
「套餐切换价格未更新」相关的日志我一般连着看前后五分钟，单看一条报错经常判断不出是哪一步失败。接口问题先分清是没发出去、发出去了没收到，还是收到了处理失败。
偶发问题先统计频率，一小时几次和一天一次，查法完全不同。
具体做法是，把每个套餐的价格写进对应的 data 属性，切换时按当前选中项取值；价格节点单独更新，别整块重渲染把事件监听冲掉；切换后同步更新隐藏字段，提交时带对套餐标识。
验收就看一点，在月付和年付之间来回切，价格数字跟着变，提交后的订单套餐与页面选中一致。