如何使用 JavaScript 实现一个简易的购物车功能？

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

如何使用 javascript 实现一个简易的购物车功能？

用 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);
  }
}

# 点击事件

上一篇: linux dns配置文件是哪个

下一篇: PHP 函数与 SPSS 函数比较

如何使用 JavaScript 实现一个简易的购物车功能？

随便看看