用 javascript 构建简易购物车
问题：如何使用 javascript 实现一个简易的购物车功能，包括以下要求？
左侧有一个框，包含可点击选项。点击左侧框中的选项将其添加到右侧框。添加后，左侧框中相应的选项将被移除。
回答：
// 获取页面元素const leftBox = document.getElementById("left-box");const rightBox = document.getElementById("right-box");const addItemButton = document.getElementById("add-item-button");// 添加点击事件处理程序leftBox.addEventListener("click", handleLeftBoxClick);// 添加按钮点击事件处理程序addItemButton.addEventListener("click", handleAddItemButton);// 处理左侧框中的点击事件function handleLeftBoxClick(event) { const selectedItem = event.target; // 检查是否点击了选项 if (selectedItem.tagName !== "LI") { return; } // 将选定的选项添加到右侧框 rightBox.appendChild(selectedItem.cloneNode(true)); // 从左侧框中删除选定的选项 leftBox.removeChild(selectedItem);}// 处理添加按钮点击事件function handleAddItemButton() { // 查找左侧框中选中的选项 const selectedItems = leftBox.querySelectorAll("li.selected"); // 将选定的选项添加到右侧框 for (const item of selectedItems) { rightBox.appendChild(item.cloneNode(true)); } // 从左侧框中删除选定的选项 for (const item of selectedItems) { leftBox.removeChild(item); }}
以上就是如何使用 JavaScript 实现一个简易的购物车功能？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1495807.html
微信扫一扫 
支付宝扫一扫 
