如何用 JavaScript 实现简易购物车功能？

发布日期： 2024-11-06 阅读量： 作者： 网络

如何用 javascript 实现简易购物车功能？

用 javascript 实现简易购物车功能

问题描述：

如上图所示，我们希望实现一个简易的购物车功能。用户可以点击左侧的选项，然后通过中间的按钮将其添加到右侧的购物车中。添加后，左侧相应的选项将被移除。

解决方法：

以下 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");
  }
});

# 点击事件

上一篇: 使用 Golang 可变参数列表与其他方法（如 slice）

下一篇: 解决 PHP 函数使用中常见错误的指南

如何用 JavaScript 实现简易购物车功能？

随便看看