如何使用for循环显示图片？

Question

我真正想做的是为预订页面创建一个网页，您可以在其中租用小屋。但是只有几个时段的客舱空着，所以我想找出在不同时段可用的那一个。我成功的是获得了不同舱室的信息，但我一直在努力让情况变得更美好。

var ferie = document.getElementById("ferie")
var parUt = document.getElementById("parUt")
var bilde = document.getElementById("bilde")
var hytter = [{
    navn: "Granstua",
    sengeplasser: 4,
    standard: "høy",
    badstue: "Ja",
    ukepris: "12 000 kr",
    enLedig: "Påske",
    bilde: "granstua.jpg"

  },
  {
    navn: "Granbo",
    sengeplasser: 6,
    standard: "Middels",
    badstue: "Nei",
    ukepris: "15 000 kr",
    ledig: "VinterFerie",
    enLedig: "Jul",
    bilde: "granbo.jpg"
  },

  {
    navn: "Granhaug",
    sengeplasser: 10,
    standard: "Høy",
    badstue: "Ja",
    ukepris: "30 000 kr",
    ledig: "VinterFerie",
    bilde: "granhaug.jpg"


  }

]

function ledigSjekk() {
  var periode = ferie.value
  var tekstUt = "oversikt over alle hyttene som er tilgjgenlig<br>"
  for (var i = 0; i < hytter.length; i++) {
    if (periode == hytter[i].ledig) {
      tekstUt += "<br>hytteNavn:" + hytter[i].navn
      tekstUt += "<br>sengeplasser:" + hytter[i].sengeplasser
      tekstUt += "<br>standard:" + hytter[i].standard
      tekstUt += "<br>badstue:" + hytter[i].badstue
      tekstUt += "<br>ukepris" + hytter[i].ukepris + "<hr>"
      bilde.src = hytter[i].bilde
    } else if (periode == hytter[i].enLedig) {
      tekstUt += "<br>hytteNavn:" + hytter[i].navn
      tekstUt += "<br>sengeplasser:" + hytter[i].sengeplasser
      tekstUt += "<br>standard:" + hytter[i].standard
      tekstUt += "<br>badstue:" + hytter[i].badstue
      tekstUt += "<br>ukepris" + hytter[i].ukepris
      bilde.src = hytter[i].bilde


    }
  }
  parUt.innerHTML = tekstUt

}

<select class="" name="" id="ferie">
  <option>Jul</option>
  <option>VinterFerie</option>
  <option>Påske</option>
</select>
<button type="button" onclick="ledigSjekk()" name="button">Sjekk hvilken som er ledig</button>
<p id="parUt"></p>
<img src="" id="bilde" alt="">

Answer 1

您可以使用gridster.js或仅提及先前已回答的类似问题。

Displaying multiple images dynamically with Javascript or jquery

Displaying multiple images with an ajax response