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);
}

DIV中出现重复项目

1 个答案: