javascript - 循环对象并显示图像

Question

有谁知道是否可以循环遍历 JS 对象中的图像并显示它？到目前为止我有这段代码。最后，您可以看到我的对象中的每个

元素都显示在页面上，但是我也想遍历图像并在序列之后显示它。这可能吗？

我尝试在我设置的超时函数之后创建一个函数，然后在事件监听器中调用它，这在逻辑上是合理的，但不，它不起作用。

recipe = {
  coffee: ["Boil some water", "Brew the coffee grounds", "Pour coffee in the cup", "Add sugar and milk"],
  lemonTea: ["Boil some water", "Steep the water in the tea", "Pour tea in the cup", "Add lemon"],
  chocolate: ["Boil some water", "Add drinking chocolate powder to the water", "Pour chocolate in the cup"]
imgUrl: [https://unsplash.com/photos/jn-HaGWe4yw]
}


const lemonTea = document.getElementById("lemon");
const coffee = document.getElementById("coffee");
const chocolate = document.getElementById("chocolate");

lemonTea.addEventListener("click", () => {
 prepareDrink("lemonTea") 
 insertImage()
});

coffee.addEventListener("click", () => { 
prepareDrink("coffee")
});

chocolate.addEventListener("click", () => { 
prepareDrink("chocolate")
});



function prepareDrink(drink) {
  const steps = document.getElementById('steps');
  const selected = recipe[drink];
  // console.log(selected)
  steps.innerHTML = '';
  selected.forEach(function(element, index, array) {
   /* console.log(element,index)*/
   /* printStep(element);*/
   setTimeout( function() {
   steps.insertAdjacentHTML('beforeend', `<li>${element}</li>` )}, 1000 * index);

});

}

  function insertImage(){
   steps.insertAdjacentHTML('beforeend' `imgUrl`)
  }
  insertImagae();

Answer 1

您遇到的问题是您的 steps 变量不在 insertImage() 函数的范围内。您不必像以前那样在脚本末尾使用 setTimeout 或调用 insertImage 函数。

这是您可以执行的操作的代码示例。我添加了 steps 参数，以便您可以在函数内部使用它。

recipe = {
  coffee: ["Boil some water", "Brew the coffee grounds", "Pour coffee in the cup", "Add sugar and milk"],
  lemonTea: ["Boil some water", "Steep the water in the tea", "Pour tea in the cup", "Add lemon"],
  chocolate: ["Boil some water", "Add drinking chocolate powder to the water", "Pour chocolate in the cup"]
};

imgUrl = 'https://unsplash.com/photos/jn-HaGWe4yw';

const lemonTea = document.getElementById("lemon");
const coffee = document.getElementById("coffee");
const chocolate = document.getElementById("chocolate");

lemonTea.addEventListener("click", () => {
 prepareDrink("lemonTea")
});

coffee.addEventListener("click", () => { 
prepareDrink("coffee")
});

chocolate.addEventListener("click", () => { 
prepareDrink("chocolate")
});

function prepareDrink(drink) {
  const steps = document.getElementById('steps');
  const selected = recipe[drink];
  steps.innerHTML = '';
  selected.forEach(function(element, index, array) {
   setTimeout( function() {
     steps.insertAdjacentHTML('beforeend', `<li>${element}</li>`);
   }, 1000 * index);

   if (index === array.length - 1) {
     setTimeout(() => {
       insertImage(steps);
     }, 1000 * array.length);
   }
  });
}

function insertImage(steps){
    steps.insertAdjacentHTML('beforeend', imgUrl);
}

我不清楚你是想显示图片还是只显示图片 URL，但如果你在 insertAdjacentHTML 上添加一个 img 标签就可以了。此外，如果您想循环浏览图像而不是始终显示相同的图像，您可以将食谱对象更改为如下所示:

coffee: { instructions: ["Boil some water", "Brew the coffee grounds", "Pour coffee in the cup", "Add sugar and milk"], image: "imgUrl"}

然后调整你的功能:

function prepareDrink(drink) {
  const steps = document.getElementById('steps');
  const selected = recipe[drink].instructions;
  steps.innerHTML = '';
  selected.forEach(function(element, index, array) {
    steps.insertAdjacentHTML('beforeend', `<li>${element}</li>`);
  });

  insertImage(steps, image);
}

function insertImage(steps, img){
    steps.insertAdjacentHTML('beforeend', img);
}