Question

我有以下数组，我正在尝试循环创建一个div，在div中将是图像和一个切换显示成分的按钮。

var cocktailsArray = [
  {image: "mojito.jpeg", ingredients:["lime", "rum", "sugar"]},
  {image: "pinacolada.jpeg", ingredients:["coconut liquer", "rum", "pineapple juice"]},
  {image: "tomcollins.jpeg", ingredients:["lemon", "gin", "sugar"]}
]

这些是我的功能：

var createObject = function(){
  $("div/div").addClass("cocktail").appendTo("main")
}

var createImage = function(image){
  var img = $("<img>").addClass("cocktail-image").appendTo(".cocktail");
  img.attr('src', image)
}

var createIngredients = function(ingredients){
  $("<button/>").text("Ingredients").addClass("ingredients-button").appendTo(".cocktail")
  $("div/div").addClass("ingredients").appendTo(".cocktail")
  $.each(ingredients, function(key, ingredient){
    var li = $("<li/>").text(ingredient).appendTo(".ingredients")
  })
}

var addCocktail = function(picture, ingredients){
  createObject();
  createImage(picture);
  createIngredients(ingredients);
}

和它这样称呼：

$(document).ready(function(){

  $.each(cocktailsArray, function(key, cocktail){
    addCocktail(cocktail.image, cocktail.ingredients)
  })

});

我得到的输出是：

mojito pinacollada tomcollins
pinacollada tomcollins
tomcollins

任何人都可以解释为什么后两行正在填充？为什么它一旦循环一次就不会停止制作对象？

Answer 1

那是因为您要将内容附加到类Traveler *travelers;的所有元素（使用cocktail）。你应该只附加到匹配集中的最后一个元素。

在这种情况下，您可以使用.appendTo()选择器：

:last

Answer 2

首先请注意"div/div"不是有效的选择器。如果您想创建div，可以使用$('<div /')。

问题是因为您在循环的每次迭代中按类名追加到新元素。这意味着在连续迭代中，您将填充新元素，以及先前创建的.cocktail和.ingredient元素。

要解决此问题，您需要在循环中保留对已创建的.cocktail和.ingredients的引用，然后仅直接附加到它们，如下所示：< / p>

＆＃13;

var cocktailsArray = [{
  image: "mojito.jpeg",
  ingredients: ["lime", "rum", "sugar"]
}, {
  image: "pinacolada.jpeg",
  ingredients: ["coconut liquer", "rum", "pineapple juice"]
}, {
  image: "tomcollins.jpeg",
  ingredients: ["lemon", "gin", "sugar"]
}]

var createObject = function() {
  return $("<div />").addClass("cocktail").appendTo("main")
}

var createImage = function($obj, image) {
  var img = $("<img>").addClass("cocktail-image").appendTo($obj);
  img.attr('src', image)
}

var createIngredients = function($obj, ingredients) {
  $("<button/>").text("Ingredients").addClass("ingredients-button").appendTo($obj)
  var $ings = $("<div />").addClass("ingredients").appendTo($obj)
  
  $.each(ingredients, function(key, ingredient) {
    var li = $("<li/>").text(ingredient).appendTo($ings)
  })
}

var addCocktail = function(picture, ingredients) {
  var $obj = createObject();
  createImage($obj, picture);
  createIngredients($obj, ingredients);
}

$(document).ready(function() {
  $.each(cocktailsArray, function(key, cocktail) {
    addCocktail(cocktail.image, cocktail.ingredients)
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<main></main>

＆＃13;

请注意createObject()现在如何返回新的div元素，该引用用于createImage()和createIngredients()函数。相同的技术用于存储对.ingredients div的引用，尽管它在createIngredients()内保持在本地。

$ .each循环数组循环次数太多

2 个答案: