data-*属性仅用于存储数据，不具行为逻辑；数量变更需JavaScript读取dataset、更新UI及后端，且应以.textContent为准而非依赖data-count。
data-* 属性本身不能直接实现数量变更
HTML 的 data-* 属性只是存储数据的容器，它不带任何行为逻辑。你看到的“点击加减改变购物车数量”，背后一定是 JavaScript 在读取、修改这些属性，并同步更新 UI 和后端状态。
常见错误现象：data-count="3" 写对了，但点击按钮没反应——大概率是忘了绑定事件或没写 JS 更新逻辑。
- 必须用
datasetAPI 读写（比如el.dataset.count），不能直接用getAttribute('data-count')然后赋值字符串 -
dataset自动把连字符转为驼峰（data-item-id→el.dataset.itemId），拼错就拿不到值 - 修改
dataset后，DOM 属性会自动同步，但页面上显示的数量文本（比如<span class="qty">3</span>）需手动更新，否则用户看不到变化
给购物车项加 data 属性的合理方式
不是所有 data 属性都必要。只存 JS 实际需要、且不便从结构推导的信息。例如：
<div class="cart-item" data-item-id="1024" data-stock="8" data-price="29.9"> <button class="btn-dec" data-action="decrease">−</button> <span class="qty">3</span> <button class="btn-inc" data-action="increase">+</button> </div>
说明：
立即学习“前端免费学习笔记（深入）”；
-
data-item-id：用于后续调用接口（如POST /cart/update?id=1024&count=4） -
data-stock：前端校验上限，避免用户加到缺货数，比硬编码在 JS 里更灵活 - 不要存冗余字段，比如
data-count初始值可省——直接读.qty.textContent更可靠
用事件委托处理多个购物车项的增减
每个商品都写独立事件监听器既低效又难维护。推荐在父容器（如 <div id="cart-list">）上监听，再根据 event.target 判断操作目标。
关键点：
- 检查
event.target.dataset.action是"increase"还是"decrease" - 用
event.target.closest('.cart-item')找到当前操作的商品容器 - 读
itemEl.dataset.stock和当前qtyEl.textContent做边界判断（不能超库存、不能减到负数） - 更新成功后，记得调用函数同步到后端，别只改前端显示
示例片段（无框架）：
document.getElementById('cart-list').addEventListener('click', e => {
if (!e.target.matches('[data-action]')) return;
const action = e.target.dataset.action;
const itemEl = e.target.closest('.cart-item');
const qtyEl = itemEl.querySelector('.qty');
let count = parseInt(qtyEl.textContent, 10);
const max = parseInt(itemEl.dataset.stock, 10);
<p>if (action === 'increase' && count < max) count++;
if (action === 'decrease' && count > 1) count--;</p><p>qtyEl.textContent = count;
// 同步到后端逻辑放这里（fetch / axios）
});data 属性和真实状态不同步时的典型表现
最常被忽略的是「只改了 DOM 显示，没更新 data 属性」。比如用户点了三次 +，.qty 变成 6，但 dataset.count 还是初始值 3——下次 JS 读 dataset.count 就拿到错数。
所以只要涉及状态变更，两个动作要一起做：
- 更新显示文本：
qtyEl.textContent = newCount - 同步 data 属性：
itemEl.dataset.count = newCount（如果确实需要这个字段）
但更推荐的做法是：**完全不依赖 dataset.count，所有数量以 .qty.textContent 为准**。因为它是用户唯一可见的真实状态，不会因 JS 执行中断而滞后。
复杂点在于：当后端返回新数量（比如库存变动通知），你要同时更新 .qty 和对应 dataset，否则下次前端操作仍可能用错旧值。
