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

用 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 实现简易购物车功能？的详细内容，更多请关注其它相关文章！