如何用 JavaScript 实现一个简易购物车，并添加商品到购物车？

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

如何用 javascript 实现一个简易购物车，并添加商品到购物车？

用 javascript 轻松构建简易购物车

问题: 如何用 js 实现一个类似购物车的功能，使其能够在左侧框选择商品并通过按钮将其添加到右侧框，同时从左侧框中移除选中的商品？

解决方案: 借鉴这篇 jquery 文章：http://www.cnblogs.com/guangzhou11/p/7593514.html

在你的 html 中创建两个列表，一个表示左侧的可选商品，另一个表示右侧的已添加商品。

为左侧商品列表添加点击事件处理程序，当用户点击某个商品时，将该商品的文本添加到右侧列表并从左侧列表中移除它。

中间按钮可以这样实现：

function addProduct() {
  // 从左侧列表获取选中的项目文本。
  const selectedText = leftList.querySelector("li.selected").textContent;

  // 将选中的文本添加到右侧列表。
  const newListItem = document.createElement("li");
  newListItem.textContent = selectedText;
  rightList.appendChild(newListItem);

  // 从左侧列表删除选中的项目。
  leftList.querySelector("li.selected").remove();
}

# 点击事件

上一篇: Golang 函数的下一个篇章: 展望未来

下一篇: linux压缩命令有哪些

如何用 JavaScript 实现一个简易购物车，并添加商品到购物车？

随便看看