如何计算列表中添加的相同项目的出现？

Question

如果已经有一个项目，并且再次添加相同的项目，那么它应该在该杂货项目旁边显示“2 now”。每次将同一物品添加到购物清单时，此数字都应增加。请帮我解决这个问题。这是我的代码：

const groceries = document.getElementsByClassName("groceries")[0];
const deleteall=document.getElementById("deleteall");
const allitems=document.getElementById("allitems");
const userinput=document.getElementById("userinput");

deleteall.addEventListener("click",function(){
    allitems.innerHTML="";
})

userinput.addEventListener("keydown",function(event){
    if(event.key == "Enter")
    additem();
})

function additem(){
    var h2= document.createElement("h2");
    h2.innerHTML="-"+ userinput.value;
    if (userinput.value == "") {
        alert("Enter some item");
        return false;
      }
    h2.addEventListener("click",function(){
        if (h2.style.color === "black") {
            h2.style.color = "red";
          } else {
            h2.style.color = "black";
          }
      })
 allitems.insertAdjacentElement("beforeend",h2);
 userinput.value="";
}

Answer 1

高效更新 DOM：当您只能更新购物车中的选定/重复项目时，为什么要删除所有项目，然后为每个 cart item 插入创建新元素##。

如果您想有效地仅更新匹配的shopping item DOM，那么

为每个元素设置一个uuid，以便我们可以在 DOM 中搜索并仅更新该特定项目而不是全部。

const groceries = document.getElementsByClassName("groceries")[0];
const deleteall = document.getElementById("deleteall");
const allitems = document.getElementById("allitems");
const userinput = document.getElementById("userinput");

function uuidv4() {
  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
    var r = (Math.random() * 16) | 0,
      v = c == "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}

const data = [];

function clearData(arr) {
  allitems.innerHTML = "";
}

function createAndAppendListItem({
  text,
  qty,
  uuid
}) {
  const li = document.createElement("li");
  li.dataset.id = uuid;
  li.textContent = `${text} - ${qty}`;
  allitems.appendChild(li);
}

function findParticularNodeAndRepaceData(obj) {
  obj.qty += 1;
  const {
    text,
    qty,
    uuid
  } = obj;
  const element = document.querySelector(`[data-id="${uuid}"]`);
  element.textContent = `${text} - ${qty}`;
}

function additem() {
  if (userinput.value === "") {
    alert("Enter some item");
  } else {
    const text = userinput.value;
    const isExist = data.find((el) => el.text === text);
    if (!isExist) {
      const obj = {
        text,
        qty: 1,
        uuid: uuidv4(),
      };
      data.push(obj);
      createAndAppendListItem(obj);
    } else {
      findParticularNodeAndRepaceData(isExist);
    }
  }
  userinput.value = "";
}

deleteall.addEventListener("click", function() {
  data.splice(0, data.length);
  clearData();
});

userinput.addEventListener("keydown", function(event) {
  if (event.key == "Enter") additem();
});

<h1 class="groceries">SHOPPING LIST</h1>

<input id="userinput" type="text" />
<button id="deleteall">delete all</button>

<h2>All Items</h2>

<ul id="allitems">

</ul>

Answer 2

我建议将所有内容作为对象存储在数组中，并创建一个 render() 函数，每次添加新对象时都会调用该函数。

// your code ...
const list = [];

function addItem() {
  list.append({
    name: userinput.value,
    count: 1,
  });
}

function render() {
  const groceries = document.getElementsByClassName("groceries")[0];
  groceries.innerHTML = "";

  for (i in list) {
     const grocery = document.createElement('li');
     grocery.appendChild(document.createTextNode(i.count < 2 ? i.name : `${i.count} ${i.name}s`));
     groceries.appendChild(grocery);
  }
}