JavaScript向itemscontainer添加Bootstrap卡片重复问题及解决尝试

核心问题 #

你的代码存在几个关键问题导致卡片重复：

• 逻辑颠倒：仅当容器为空时才调用清空，容器有内容时直接追加卡片，完全没达到"先清空再添加"的目的。
• ID不匹配：你描述的目标容器是itemscontainer，但代码里操作的是ssst，大概率是笔误导致清空和添加的不是同一个容器。
• HTML语法错误：卡片字符串末尾多了";;，会生成无效的HTML结构。
• 重复ID：所有卡片里的计数器都用id="counter"，ID在页面中必须唯一，应该改用class。

修正后的代码 #

场景1：每次收到消息时，清空容器并重新渲染当前物品（适用于单物品更新）

// 清空容器函数
function clearInventory() {
    document.getElementById("itemscontainer").innerHTML = "";
}

// 监听消息
window.addEventListener('message', (event) => {
    const data = event.data;
    if (data.action === 'insertItem') {
        const { name, count, icon } = data.items;
        // 先清空容器
        clearInventory();
        // 生成卡片HTML
        const cardHtml = `
            <div class='card holder'>
                <div class="card-body">
                    <img src="icons/${icon}" style="position:absolute;left:15%;width:40px; height:36px;" alt="${name}图标">
                    <h4 class="counter">${count}</h4>
                </div>
                <span class="itemname">${name}</span>
            </div>
        `;
        // 添加到容器
        document.getElementById("itemscontainer").innerHTML = cardHtml;
    }
});

场景2：每次收到消息时，添加单个物品（避免重复，已有则更新数量）

如果你的需求是每次添加一个物品，且同一物品只显示一张卡片（数量累加），可以用以下代码：

const inventoryContainer = document.getElementById("itemscontainer");

window.addEventListener('message', (event) => {
    const data = event.data;
    if (data.action === 'insertItem') {
        const { name, count, icon } = data.items;
        // 检查是否已存在该物品的卡片
        const existingCard = Array.from(inventoryContainer.querySelectorAll('.itemname')).find(el => el.textContent === name);
        if (existingCard) {
            // 已存在，更新数量
            const counter = existingCard.parentElement.querySelector('.counter');
            counter.textContent = parseInt(counter.textContent) + count;
        } else {
            // 不存在，生成新卡片
            const cardHtml = `
                <div class='card holder'>
                    <div class="card-body">
                        <img src="icons/${icon}" style="position:absolute;left:15%;width:40px; height:36px;" alt="${name}图标">
                        <h4 class="counter">${count}</h4>
                    </div>
                    <span class="itemname">${name}</span>
                </div>
            `;
            inventoryContainer.innerHTML += cardHtml;
        }
    }
});

关键改进点 #

• 统一容器ID为itemscontainer，和你的描述一致。
• 场景1中严格执行"先清空再添加"的逻辑，确保每次消息触发后容器里只有当前物品的卡片。
• 场景2中通过物品名称检查是否已存在卡片，避免重复创建，同时更新已有卡片的数量。
• 把id="counter"改为class="counter"，符合HTML ID唯一性要求。
• 使用模板字符串（`）替代字符串拼接，让代码更易读且不易出错。
• 修正了图片路径的转义符（\\改为/，更符合Web路径规范）。

内容的提问来源于stack exchange，提问作者MrObscure