DOM中的项目被多次添加

Question

我遇到了一个问题，每次我添加元素时，它都会自行相乘（例如，如果购物车中有 1 个元素，下次点击它会再添加 2 个元素，如果有 3 个元素，它会添加多3个，6个就加4个），这是个大问题，请帮忙！

我的js代码：

let pList = document.getElementById("productList");

const addDrip = () => {
  let Drip, localObj, tObj;
  Drip = {
    name: "Traditional Drip",
    type: "normal",
    price: "2.00",
    imgSrc: "images/c5.png"
  };
  localObj = localStorage.getItem("Drip");

   if(!localObj) tObj = [];
   else tObj = JSON.parse(localObj);
   
  tObj.push(Drip)
  localStorage.setItem("Drip", JSON.stringify(tObj));
  
  for(let i = 0;i < tObj.length;i++){
    
    let htmlDrip = `
     <div class="productDiv">
     <p>${tObj[i].name}</p> 
     <p>${tObj[i].type}</p>
     <p>${tObj[i].price}$</p>
     <img src="${tObj[i].imgSrc}">
     </div>
     `
    document.getElementById("productList").innerHTML += htmlDrip;
  }
}

我的html部分：

<div class="cList">
      <img src="images/c5.png"class = "tDrip">
      <h1 class="Type">Traditional Drip</h1>
      <button id="tAdd"onclick="addDrip()">Add Traditional Drip</button>

    </div>

    <div id = productList></div>

Answer 1

在添加新项目时，您实际上不需要遍历数组。 您可以先从localStorage获取物品

HTML：

<div class="cList">
    <img src="images/c5.png" class="tDrip">
    <h1 class="Type">Traditional Drip</h1>
    <button id="tAdd" onclick="addDrip()">Add Traditional Drip</button>

</div>

<div id="productList"></div>

脚本：

const pList = document.getElementById("productList");
let localObj = JSON.parse(localStorage.getItem("Drip"));

const parseItems = () => {

    if (!localObj) localObj = [];
    for (let i = 0; i < localObj.length; i++) {
        let htmlDrip = `
            <div class="productDiv">
                <p>${localObj[i].name}</p> 
                <p>${localObj[i].type}</p>
                <p>${localObj[i].price}$</p>
                <img src="${localObj[i].imgSrc}">
            </div>
            `;
        pList.innerHTML += htmlDrip;
    }
}

parseItems();


const addDrip = () => {
    let Drip;
    Drip = {
        name: "Traditional Drip",
        type: "normal",
        price: "2.00",
        imgSrc: "images/c5.png"
    };

    if (!localObj) localObj = [];
    localObj.push(Drip);
    localStorage.setItem("Drip", JSON.stringify(localObj));

    let htmlDrip = `
            <div class="productDiv">
                <p>${Drip.name}</p> 
                <p>${Drip.type}</p>
                <p>${Drip.price}$</p>
                <img src="${Drip.imgSrc}">
            </div>
            `;

    pList.innerHTML += htmlDrip;
}

Answer 2

这是因为您的阵列已经从本地存储中获得了点滴更新 只需用这个替换你的 JS 代码，它就会按照你想要的方式工作。

let pList = document.getElementById("productList");

const addDrip = () => {
  let Drip, localObj, tObj;
  Drip = {
    name: "Traditional Drip",
    type: "normal",
    price: "2.00",
    imgSrc: "images/c5.png"
  };
  localObj = localStorage.getItem("Drip");
console.log(localObj,"Local object")
   if(!localObj) {
   tObj = [];
     tObj.push(Drip)
   }else {
   tObj = JSON.parse(localObj);
   console.log(tObj,"T object")
   }
  localStorage.setItem("Drip", JSON.stringify(tObj));
  
  for(let i = 0;i < tObj.length;i++){
    
    let htmlDrip = `
     <div class="productDiv">
     <p>${tObj[i].name}</p> 
     <p>${tObj[i].type}</p>
     <p>${tObj[i].price}$</p>
     <img src="${tObj[i].imgSrc}">
     </div>
     `
    document.getElementById("productList").innerHTML += htmlDrip;
  }
}

你只需要在你的数组为空时推送。试一试，它会起作用的。

注意：您也可以查看演示。如果刷新，只需清除本地存储。https://www.w3schools.com/code/tryit.asp?filename=GS7FA0970MF3