用 javascript 实现简易购物车功能
问题描述：
如上图所示，我们希望实现一个简易的购物车功能。用户可以点击左侧的选项，然后通过中间的按钮将其添加到右侧的购物车中。添加后，左侧相应的选项将被移除。
解决方法：
立即学习“Java免费学习笔记（深入）”；
以下 javascript 代码可以实现该功能：
const leftBox = document.getElementById("leftBox");const rightBox = document.getElementById("rightBox");const addButton = document.getElementById("addButton");addButton.addEventListener("click", () => { const selectedItems = leftBox.querySelectorAll("li.selected"); selectedItems.forEach((item) => { rightBox.appendChild(item); }); selectedItems.forEach((item) => { item.classList.remove("selected"); });});leftBox.addEventListener("click", (e) => { e.preventDefault(); if (e.target.tagName === "LI") { e.target.classList.toggle("selected"); }});
原理说明：
使用事件监听器监听中间按钮的点击事件。获取左侧框中所有被选中的项（即带有 “selected” 类的 li 元素）。将选中的项添加到右侧框中。从左侧框中移除选中的项，并移除其 “selected” 类。使用事件监听器监听左侧框中的点击事件。如果点击目标是一个 li 元素，则切换该元素的 “selected” 类。
以上就是如何用 JavaScript 实现简易购物车功能？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1495809.html
微信扫一扫 
支付宝扫一扫 
