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

這是因為您的陣列已經從 localstorage 獲得了滴水更新，只需用它替換您的 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;
  }
}

你只需要在你的數組為空時推送。 試一試它會起作用的。

注意：您也可以查看演示。 刷新就清除localstorage。 https://www.w3schools.com/code/tryit.asp?filename=GS7FA0970MF3