限制显示元素数量的条件语句

Question

我无法实现限制我将相同商品添加到购物清单的逻辑。当商品相同时，我只想显示现有商品的数量。

    <div class="pizzas">
    </div>
    <div class="shoppingCart">
        <p class="totalPrice">Hungry? order our pizzas</p>
    </div>

// js

fetch("https://raw.githubusercontent.com/alexsimkovich/patronage/main/api/data.json")
.then(data => data.json())
.then(data => {
let valueCurrency = 0;
data.forEach(element => {
    const shoppingCart = document.querySelector(".shoppingCart");
    const pizzas = document.querySelector(".pizzas");
    const box = document.createElement("div");
    const img = document.createElement("img");
    const title = document.createElement("h3");
    const ingredients = document.createElement("p");
    const price = document.createElement("h4");
    const btn = document.createElement("button");
    const totalPrice = document.querySelector(".totalPrice");
     
    box.className = "box";
    ingredients.className = "ingredients"
    btn.className = "btn";
    img.src = element.image;
    img.className = "img";
     
    title.innerHTML = element.title;
    ingredients.innerHTML = element.ingredients;
    price.innerHTML = element.price.toFixed(2) + " zł";
    btn.innerHTML = "Dodaj do koszyka";
     
    box.appendChild(img);
    box.appendChild(title);
    box.appendChild(ingredients);
    box.appendChild(price);
    box.appendChild(btn);
    pizzas.appendChild(box);


    btn.addEventListener("click", (e) => {
        valueCurrency = valueCurrency + element.price;

        const pizza = document.createElement("div");
        pizza.className = "pizzaList";
        const pizzasList = document.createElement("li");
        const pizzaPrice = document.createElement("p");
        const btnRemove = document.createElement("button");
        btnRemove.innerText = "X";
         
        pizzasList.innerText = title.textContent;
        pizzaPrice.innerText = price.textContent;

        pizza.appendChild(pizzasList);
        pizza.appendChild(pizzaPrice);
        pizza.appendChild(btnRemove);

        totalPrice.innerText = "Całkowita cena: " + valueCurrency.toFixed(2);

        if(pizzasList.innerText === pizzasList.innerText)
        {
            // don't add another item to the list
            // just add +1 to existing element
        }
        else
        {
            // add an item to the list
            shoppingCart.prepend(pizza);

        }

        btnRemove.addEventListener("click", (e) => {
            pizza.remove();
            valueCurrency = valueCurrency - element.price;
            totalPrice.innerText = "Całkowita cena: " + valueCurrency.toFixed(2);
        })
    })

});
 
})
.catch(err => console.log(err));

我的问题正是在条件语句中，我不知道如何实现对相同比萨饼的计数选项。

提前感谢您的帮助。

Answer 1

由于您为此使用 html 元素，您可以做的是在您的比萨元素中使用数据属性，并在每次需要时增加它。

类似：

if(pizzasList === pizzasList)
{
  pizza.dataset.total = Number(pizza.dataset.total) + 1;
}
else
{
  pizza.dataset.total = 1;
  shoppingCart.prepend(pizza);
}

然后只需使用pizza.dataset.total 即可检索总重复次数。