如何在JavaScript的map方法中调用自定义createItemCart函数

第一步：调整createItemCart函数适配批量渲染场景 #

你原有的createItemCart是针对单次点击添加商品的场景写的，需要微调参数和逻辑，兼容已有的购物车数组批量渲染：

// 新增qty参数，接收商品数量
function createItemCart(imgProduct, titleProduct, priceProduct, totalPrice, id, qty) {
  const itemsCart = document.getElementById("items-cart");
  // 移除这里的总价修改逻辑，交给map循环批量计算
  // document.querySelector(".total-price").innerText = totalPrice + priceProduct;
  
  const item = document.createElement("div");
  item.setAttribute("class", "item-cart");

  const imgItem = document.createElement("img");
  imgItem.src = imgProduct;

  const detailItem = document.createElement("div");

  const titleItem = document.createElement("div");
  titleItem.setAttribute("class", "title-item");
  titleItem.innerText = titleProduct;

  const divPrice = document.createElement("div");

  const priceItem = document.createElement("span");
  priceItem.setAttribute("class", "price-item");
  priceItem.innerText = priceProduct;

  const spanToman = document.createElement("span");
  spanToman.innerText = "تومان";

  const qtyItem = document.createElement("div");
  qtyItem.className = "qty-item";
  // 数量改为传入的qty，不要写死1
  qtyItem.innerText = qty;
  qtyItem.id = "item" + id;

  const deleteItem = document.createElement("i");
  deleteItem.className = "delete-item";
  deleteItem.innerText = "x";

  deleteItemCart(deleteItem, totalPrice, priceProduct);

  detailItem.appendChild(titleItem);
  detailItem.appendChild(divPrice);
  detailItem.appendChild(qtyItem);
  divPrice.appendChild(priceItem);
  divPrice.appendChild(spanToman);
  item.appendChild(imgItem);
  item.appendChild(detailItem);
  item.appendChild(deleteItem);

  itemsCart.appendChild(item);
}

原来函数外面的点击获取商品属性的逻辑不需要修改，不影响你之前的点击添加商品功能。

第二步：改造map循环，调用createItemCart函数 #

直接把map里的DOM创建逻辑替换为函数调用，把itemCart的对应属性按参数顺序传入即可：

// 初始化总价和商品总数
let totalPrice = 0;
let sumQty = 0;
items.map((itemCart) => {
  // 保留原有的总价和数量统计逻辑
  totalPrice += itemCart.price * itemCart.qty;
  sumQty += itemCart.qty;
  // 直接调用createItemCart，传入itemCart的对应属性
  createItemCart(
    itemCart.img, 
    itemCart.title, 
    itemCart.price, 
    totalPrice, 
    itemCart.id, 
    itemCart.qty
  );
});
// 批量更新总价和总数，避免重复操作DOM
document.querySelector(".total-price").innerText = totalPrice;
document.getElementById("number").innerText = sumQty;

你要的itemCart.img属性就是作为第一个参数传入createItemCart，函数内部会直接赋值给imgItem的src属性，和你之前手动写的逻辑效果完全一致。

内容的提问来源于stack exchange，提问作者Mahdi kzn