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

您遇到的问题是您的step变量不在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);
}

遍历对象并显示图像

1 个答案: