javascript教程：解决网页交互难题，实战电商购物车功能开发

新手小白做电商网站时，是不是总在购物车这卡壳？比如商品加不进去、数量改了总价不变、选了规格却没反应 —— 这些网页交互难题，其实用 JavaScript 都能搞定。今天兔子哥就带大伙手把手做个简易购物车，边做边解决这些问题，看完你就知道，原来没那么难。

先搞懂购物车核心功能有哪些

咱先想想，用户用购物车时会干啥？无非这几件事：

• 点击 “加入购物车”，商品能加到列表里
• 能改购买数量，改完总价自动变
• 可以勾选商品，只算选中的总价
• 不想买了，能删除商品

这些功能看着简单，实际做的时候容易出啥问题呢？比如点了好几次 “加入购物车”，商品重复添加；改数量时没限制最低为 1，结果出现 0 个甚至负数 —— 这些都是新手常踩的坑，后面咱们一个个解决。

---

第一步：搭个简单的页面架子

不用搞得太复杂，先写点基础 HTML。比如一个商品展示区，放个商品图片、名称、价格、规格选择框和 “加入购物车” 按钮；再弄个购物车列表，显示已添加的商品、数量按钮、删除按钮和总价。
给大伙个示例代码片段，你们照着改改就行：
html

<div class="product"><h3>纯棉T恤h3><p>价格：¥<span class="price">99span>p><select class="size"><option>XSoption><option>XLoption>select><button onclick="addToCart('纯棉T恤', 99, this)">加入购物车button>div><div class="cart"><h3>我的购物车h3><div class="cart-list">div><p>选中总价：¥<span class="total">0span>p>div>

这里的 onclick 是点击按钮时触发函数，后面的参数分别是商品名、价格和当前按钮，这样函数就能知道是哪个商品被添加了。

---

第二步：用 JavaScript 处理 “加入购物车”

点了 “加入购物车” 后，得让商品出现在购物车列表里。但直接加的话，同个商品选不同规格会被当成新商品，这可不行。怎么解决？
可以给每个商品加个唯一标识，比如把名称和规格拼在一起。函数里先判断购物车中有没有这个标识，有就提示 “已添加”，没有就新增条目。代码大概这样：
javascript

let cartData = []; // 用数组存购物车数据function addToCart(name, price, btn) {let size = btn.previousElementSibling.value; // 获取选中的规格let id = name + '-' + size; // 生成唯一标识let existing = cartData.find(item => item.id === id);if (existing) {alert('该商品已在购物车中');return;}// 没有就添加新商品cartData.push({ id, name, price, size, count: 1 });updateCart(); // 更新购物车显示}

这样就不会重复添加同规格商品了，是不是很简单？

---

第三步：处理数量修改和总价计算

改数量时，得保证最少买 1 个。可以给 “+”“-” 按钮加点击事件，点击时改 count 值，小于 1 就不让改。
计算总价也有讲究，只算选中的商品。给每个商品条目加个复选框，选中状态变了就重新算总价。这里有个坑：新手容易只在改数量时算总价，忘了勾选状态变化时也要算 —— 这点得注意。
放个更新购物车的函数片段：
javascript

function updateCart() {let list = document.querySelector('.cart-list');let total = 0;list.innerHTML = ''; // 先清空列表cartData.forEach(item => {// 生成购物车条目HTML，包含复选框、数量按钮等let itemHtml = `${item.name}(${item.size})${item.id}', -1)">-${item.count}${item.id}', 1)">+${item.id}')">删除

`;list.innerHTML += itemHtml;// 累加选中商品的总价if (document.querySelector(`input[value="${item.id}"]`).checked) {total += item.price * item.count;}});document.querySelector('.total').textContent = total;}
这里的 changeCount 函数用来改数量，deleteItem 是删除商品，都很直观。

---

为啥要这么做？新手容易犯啥错？

有朋友可能会问，直接操作 DOM 改内容不行吗？非要用数组存数据？
其实用数组存数据（也就是数据驱动）是个好习惯。比如你删除商品时，先改数组里的数据，再重新渲染列表，比直接删 DOM 节点不容易出错。新手常直接改 DOM，结果数据和显示对不上，后面算总价就乱了。
还有个小技巧：每次操作后都调用 updateCart () 重新渲染，这样不用管之前的状态，保证显示和数据一致，省不少事。

---

最后说个兔子哥的小发现，做购物车时，用户最烦的是操作后没反馈。比如加购成功后，购物车图标跳一下；删除时弹出确认框 —— 这些细节虽小，但能让体验好很多。你们做的时候也可以加上，不难，就加个简单的动画或者 alert 提示。
刚开始练的时候，不用追求完美，先实现核心功能，再慢慢优化。多试几次，遇到报错别慌，一步步找原因，很快就能掌握啦。

标签： 购物车 手把手