Question

我正在使用jQuery的append（）和forEach（）函数来映射对象数组，从而将数据显示在幻灯片上。尽管数组中有一个对象，但是生成的标记具有额外的数据，本质上，append（）方法将相同的标记附加2倍或更多次。

我尝试删除标记，而是将其替换为“ Hello World”（无标签），并且可以正确呈现。但是，当我输入“ Hello World”时，它将追加3次而不是一次。我已经在console.logged数组中确保在forEach（）方法之前和期间仅包含一个对象，并且可以确认数组中只有一个元素，因此这是append（）的问题

$.getJSON(
            `${window.location.origin}/public/js/config/shopCards.json`,
            function(res) {
                var featuredItems = res.filter(function(item) {
                    return item.isFeatured;
                });

                if (featuredItems.length === 0) {
                    $('.featured-items').empty();
                    return;
                }

                console.log(featuredItems, featuredItems);

                featuredItems.forEach(function(item) {
                    console.log(item);
                    $('.siema-home').append(`       
        <div class="card card-shop home-card ${
                        item.isExclusive ? 'exclusive' : ''
                    } ${item.isOnSale ? 'sale' : ''} ${item.isFeatured ? 'featured' : ''} ${item.isSemiExclusive ? 'semiExclusive' : ''}" data-id=${item.id}>
          <div style="position: relative">
            <img src=${
                                item.thumbnailURL
                            } class="card-img-top" alt=${item.projectName} draggable="false"/>
            <div class="card-more-details">
              <p class="helper-text">Click For More Details</p>
              ${
                                    item.isExclusive
                                        ? '<span class="badge badge-warning mb-2">Exclusive Build</span>'
                                        : ''
                                }
              ${
                                    item.isSemiExclusive
                                        ? '<span class="badge badge-danger mb-2">Semi-Exclusive Build</span>'
                                        : ''
                                }
              ${
                                    item.isOnSale
                                        ? '<span class="badge badge-success mb-2">On Sale</span>'
                                        : ''
                                }
              ${
                                    item.isFeatured
                                        ? '<span class="badge badge-info mb-2">Featured</span>'
                                        : ''
                                }
            </div>
          </div>
          <div class="card-body card-shop-body">
            <div>
              <h5 class="card-title-shop text-center">
                ${item.projectName}
              </h5>

              <p class="card-price text-center">$${item.price}</p>
            </div>
          </div>

        </div>`);
                });

我希望在滑块中只能看到一张“购物卡”。

实际输出为滑块中的3张卡片。

调试信息：Chrome w/ Dev console

完整的index.html可用here（以供进一步检查）

Answer 1

因此，在经过繁琐的工作和测试之后，我发现问题实际上出在滑块Siema上，它实际上复制了标记并将其重新添加到siema-home div中。另一个问题是将width: 100%与Siema一起使用，这会导致滑块断裂并并排显示它与append()函数附加的标记并排创建的额外幻灯片。

TLDR：这是滑块的问题，解决方法是将宽度从100％编辑为较小的值或使用确定的像素值。

为什么append（）多次添加标记而不是一次添加标记？

1 个答案: