重複的項目出現在DIV

Question

我的代碼有問題。我將項目推入一個新的數組中，並在DIV中顯示其中的兩個。出於某種原因，它顯示兩次相同的項目，而不是顯示兩個單獨的項目。希望有人能幫助我解決這個問題。我只需要一種方法來防止相同的配方能夠在DIV中顯示兩次。

 var categoryItems = []; 
    var recipeTitle = $('#recipeTitle').text(); 

    $.each(recipe_data, function(i, item){ 
     if (item.recipeCategory == "4" && recipeTitle !== item.recipeName) { categoryItems.push(item); } 
    }); 

    var similarRecipe = ''; 
    var randomRecipe = {}; 

    randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)]; 
    for(var i = 0; i < categoryItems.length; i += 2) { 
     similarRecipe = [ '<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL +'" data-title="' + randomRecipe.recipeName + '"></div>' 
     + '<a href="' + randomRecipe.recipePageURL +'">' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + '</a>' 
     + '<a href="' + randomRecipe.recipePageURL +'">' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '</a>' + '</div>' ]; 
     $('#recipeSimilar').append(similarRecipe); 
    } 

編輯：請看一看這個搗鼓一個例子。刷新時不應顯示相同的配方，而應顯示類別中的兩種不同配方。我的問題是，有時它刷新時會顯示相同的兩次。 https://jsfiddle.net/wn4fmm5r/

Answer 1

你生成一個隨機的配方並將其顯示兩次到您的for循環

randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)]; 
    for(var i = 0; i < categoryItems.length; i += 2) { 
     similarRecipe = [ '<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL +'" data-title="' + randomRecipe.recipeName + '"></div>' 
     + '<a href="' + randomRecipe.recipePageURL +'">' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + '</a>' 
     + '<a href="' + randomRecipe.recipePageURL +'">' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '</a>' + '</div>' ]; 
     $('#recipeSimilar').append(similarRecipe); 
    } 

嘗試包括你的語句生成內部循環隨機配方。

 for(var i = 0; i < categoryItems.length; i += 2) { 
randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)]; 
     similarRecipe = [ '<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL +'" data-title="' + randomRecipe.recipeName + '"></div>' 
     + '<a href="' + randomRecipe.recipePageURL +'">' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + '</a>' 
     + '<a href="' + randomRecipe.recipePageURL +'">' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '</a>' + '</div>' ]; 
     $('#recipeSimilar').append(similarRecipe); 
    } 

編輯爲不重複----

var counter; 
for (var i = 0; i < categoryItems.length; i += 2) { 
    var item = Math.floor(Math.random() * categoryItems.length); 
    if (!counter) { 
     counter = item; 
    } else { 
     if (counter == item) { 
      item = Math.floor(Math.random() * categoryItems.length); 
      counter = item; 
     } 
    } 
    randomRecipe = categoryItems[item]; 
    similarRecipe = ['<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL + '" data-title="' + randomRecipe.recipeName + '"></div>' 
    + '<a href="' + randomRecipe.recipePageURL + '">' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + '</a>' 
    + '<a href="' + randomRecipe.recipePageURL + '">' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '</a>' + '</div>']; 
    $('#recipeSimilar').append(similarRecipe); 
}