javascript InnerHTML 只添加一次卡片

一尘不染

javascript InnerHTML 只添加一次卡片

javascript

我正在尝试使用 javascript 在名为 [ itemscontainerdocument.getElementById("itemscontainer").innerHTML ] 的 div 中添加引导卡，因此我希望将卡插入itemscontainer其中，如下所示：-

但问题是物品卡会不止一次地重复它们，例如：-

我想要的是itemscontainer在添加卡片之前清除第一个，这是我尝试过的，以便每个项目只有一张卡片

// clear function
    function clear(){
        document.getElementById("ssst").innerHTML = ""
    }
    // listener append all items to the inventory
    window.addEventListener('message', (event) => {
        let data = event.data
        if(data.action == 'insertItem') {
            let name = data.items.name
            let count = data.items.count
            let icon  = data.items.icon
            if(document.getElementById("ssst").innerHTML == ""){
                clear()
            }else{
            document.getElementById("ssst").innerHTML += 
                "<div class='card holder'>"+
                        '<div class="card-body">'+
                            '<img src="icons\\'+icon+'" style="position:absolute;left:15%;width:40px; height:36px;" alt="">'+
                            '<h4 id="counter">'+count+'</h4>'+
                        '</div>'+
                        '<span class="itemname">'+name+'</span>'+
                '</div>";'
            }
        }
    })

阅读 88

2022-07-26

共1个答案

一尘不染

真正的解决方案是弄清楚为什么你会多次获得这些物品。根据您提供的信息，我无法回答。所以我们唯一能推荐的是如何防止物品被多次添加。

如果您的消息传递系统返回重复项，您可以确定您是否已经看到它。如果你这样做，请更换它。否则添加它。

window.addEventListener('message', (event) => {
  const data = event.data;
  console.log(data)
  if (data.action == 'insertItem') {
    let name = data.items.name
    let count = data.items.count
    let icon = data.items.icon

    const html = `
      <div class='card holder' data-name="${name}">
        <div class="card-body">
          <img src="icons/${icon}" style="position:absolute;left:15%;width:40px; height:36px;" alt="${icon}">
          <h4 id="counter">${count}</h4>
        </div>
        <span class="itemname">${name}</span>
     </div>`;

    const elemExists = document.querySelector(`[data-name="${name}"]`);
    if (elemExists) {
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, 'text/html');
      elemExists.replaceWith(doc.body);
    } else {
      document.getElementById("ssst").insertAdjacentHTML("beforeend", html);
    }
  }
});




window.postMessage({
    action: 'insertItem',
    items: {
      name: 'foo',
      count: 1,
      icon: 'foo'
    }
});

window.postMessage({
    action: 'insertItem',
    items: {
      name: 'bar',
      count: 40,
      icon: 'barrrrrr'
    }
});


window.postMessage({
    action: 'insertItem',
    items: {
      name: 'foo',
      count: 1000,
      icon: 'foo'
    }
});
<div id="ssst"></div>

2022-07-26