javascript - 试图防止页面上的重复项

Question

我有一个正在使用的 JSON 数据库。单击页面上的项目后，它会在页面上显示该项目的内容。在底部，我为每件商品提供了类似的产品。单击类似产品后，它会刷新包含新项目内容的页面。

相似的产品被随机化并添加到一个名为“categoryItems”的新数组中。我正在将基于项目商品和品牌的项目推送到这个新数组。它还会检查 DIV“productTitle”并在数据库中查找该关键字。如果匹配，则显示该类别。我遇到的问题是有时随机项目与页面上已有的项目相匹配。我在下面包含了一支代码笔。如果您多次单击类似产品，您会发现它最终与页面上已有的产品相匹配。我需要某种方式来防止这种情况。希望有人能理解我的意思谢谢!

Link to CodePen

//show similar product
var categoryItems = [];
//filter random product by product title
var prodTitle = $('#productTitle').text();
$.each(json, function(i, item){
    if (prodTitle.indexOf("Tomatoes") !=-1) { 
        if(item.itemCommodity == '1120' && item.itemBrandLetter == "C") categoryItems.push(item);
    }
});

var similarProduct= '';
$.each(json, function(i,item){
    similarProduct = categoryItems[Math.floor(Math.random()*categoryItems.length)];
    similarProduct = '<div>' + '<a href="#" class="showProduct"' + 'data-itempageurl="' + similarProduct.itemFullUPC + '"' + 'data-itemgmo="' + similarProduct.itemGMOFree + '"' + 'data-itembpa="' + similarProduct.itemBPAFree + '"' + 'data-itemgluten="' + similarProduct.itemGlutenFree + '"' + 'data-itemlowsodium="' + similarProduct.itemLowSodium + '"' + 'data-itemorganic="' + similarProduct.itemOrganic + '"' + 'data-itemimage="' + similarProduct.imageURL + '"' + 'data-itemname="' + similarProduct.itemName + '"' + 'data-itemoz="' + similarProduct.itemPackSize + '"' + 'data-itemdescription="' + similarProduct.itemDescription + '"' + 'data-itemupc="' + similarProduct.itemFullUPC + '"' + '>' + '<img class="img-responsive img-hover similarProductImagesCategory" src="' + similarProduct.imageURL + '">' + '<h3 class="similarProductSubCategoryImgCaption">' + similarProduct.itemName + '</h3>' + '</a>' + '</div>';
});
$('#productSimilar').append(similarProduct);      

Answer 1

我不确定你的问题，但如果你的问题只是有时相似的产品和显示的产品，你只需要检查它们是否具有相同的引用，例如:

    $.each(json, function(i, item){
        if (prodTitle.indexOf("Tomatoes") !=-1) { 
            if(item.itemCommodity == '1120' && item.itemBrandLetter == "C" && prodTitle !== item.itemName) { // Added comparison between prodTitle and item.itemName
categoryItems.push(item);
 }
        } });

这是一个带有您的产品名称的示例，但您应该查看生产引用。

希望对你有帮助

编辑 1:不客气:-)

顺便说一句，如果您只想要一个类似的产品，为什么还要扔掉整个 JSON？可以替换这段代码

var similarProduct= '';
$.each(json, function(i,item){
    similarProduct = categoryItems[Math.floor(Math.random()*categoryItems.length)];
    similarProduct = '<div>' + '<a href="#" class="showProduct"' + 'data-itempageurl="' + similarProduct.itemFullUPC + '"' + 'data-itemgmo="' + similarProduct.itemGMOFree + '"' + 'data-itembpa="' + similarProduct.itemBPAFree + '"' + 'data-itemgluten="' + similarProduct.itemGlutenFree + '"' + 'data-itemlowsodium="' + similarProduct.itemLowSodium + '"' + 'data-itemorganic="' + similarProduct.itemOrganic + '"' + 'data-itemimage="' + similarProduct.imageURL + '"' + 'data-itemname="' + similarProduct.itemName + '"' + 'data-itemoz="' + similarProduct.itemPackSize + '"' + 'data-itemdescription="' + similarProduct.itemDescription + '"' + 'data-itemupc="' + similarProduct.itemFullUPC + '"' + '>' + '<img class="img-responsive img-hover similarProductImagesCategory" src="' + similarProduct.imageURL + '">' + '<h3 class="similarProductSubCategoryImgCaption">' + similarProduct.itemName + '</h3>' + '</a>' + '</div>';
});

与

var similarProduct= '';
var randomProduct= {};
    randomProduct= categoryItems[Math.floor(Math.random()*categoryItems.length)];
    similarProduct = [...]//Keep ur stuff but use randomProduct instead of overwriting your similarProduct, your code will be more readable