Question

所以我需要制作一个if语句，每当加载id 0到3（4个图像）时，创建一个0到3个图像的新行，这与我需要用的单词相同（可能工作原理相同）

我对if语句等很新。我只是不知道从哪里开始这个... 图像和单词从JSON文件加载，我已经有了第一个代码。

与var html = '<div class="row">'; html += '</div>';一样我需要一个if语句让图像加载成一行4个图像/单词nexto eachother。然后自动创建一个新行。

我想这听起来很复杂..我希望有人可以帮助我。

JSON，

{"main_object": {
    "imagesJ": ["beak", "cat", "egg", "meel", "milk", "passport", "spoon", "thee"],
    "wordsJ": ["næb", "kat", "æg", "mel", "mælk", "pas", "ske", "te"]
}
}

＆＃13;

var jsonData = "noJson";
var hr = new XMLHttpRequest();

$(document).ready(function(){
var jsonData = 'empty';
  $.ajax({
    async: false,
    url: "./js/data.json",
    dataType: 'html',
      success: function(response){
        jsonData = JSON.parse(response);

        console.log('ok');
          var imagesJ = jsonData.main_object.imagesJ;
          var wordsJ = jsonData.main_object.wordsJ;
          var html = '<div class="row">';
          var html2 = '';

          for(i = 0; i < imagesJ.length; i++) {
//html += '</div><div class="row">';
//if statement that whenthere are 0-3 = 4 pictures it begins a new block of code wich makes 0-3 = 4 pictures, that are in bootstrap row PROBEER DIT ALLEEN MET STACKOVERFLOW OF ANDERE INTERNET DINGEN
            html += '<div class="col-md-2"><img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'"></div>';
          }
          html += '</div>';

          document.getElementById('images').innerHTML = html;

          for (i = 0; i < wordsJ.length; i++) {
            html2 += '<p>'+wordsJ[i]+'</p>';
          }
          document.getElementById('words').innerHTML = html2;

      },
      error: function(){
        console.log('JSON could not be loaded.');
      }
    });

        console.log(jsonData);

});

＆＃13;

header {
  position: relative;
  height: 20%;
  /*border-bottom: thick solid grey;*/
}

body {
  background-color: #f0f0f0;
}
.container {
  position: relative;
  height: 50%;
}
.images img {
  position: relative;
  height: 100px;
  width: 100px;
}
#img4, #img5, #img6, #img7 {
  top: 5%;
}

footer {
  position: relative;
  height: 5%;
  /*border-top: thick solid grey;*/
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <title>Sleepopdracht</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="css/css.css">
</head>
<body>
  <header>

  </header>

    <div class="container" id="container">
      <div class="row">
        <div class="col-md-2">
          <img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'">
        </div>
        <div class="col-md-2">
          a
        </div>
        <div class="col-md-2">
          a
        </div>
        <div class="col-md-2">
          a
        </div>
      </div>
      <div class="row">
        <div class="col-md-2">
          a
        </div>
        <div class="col-md-2">
          a
        </div>
        <div class="col-md-2">
          a
        </div>
        <div class="col-md-2">
          a
        </div>
      </div>
      <div class="images" id="images"></div>
                                          <div class="words" id="words"></div>
    </div>


  <footer>
  </footer>
    <script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>

＆＃13;

正如您在HTML中看到的那样，我已经创建了这些行，它们需要成为一个并且循环自己有点像<div class="col-md-2"> <img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'"> </div>

This is my result right now.

And this is what it needs to resemble closely.

Answer 1

试试这个;）

for(i = 0; i < imagesJ.length; i++){      
  html += '<div class="col-md-2"><img src="/sleepopdracht/img/' + imagesJ[i] + '.jpg" alt="images" id="' + [i] + '"></div>';
  if((i + 1) % 4 == 0){
    html += '</div><div class="row">';
  }
}

if语句加载了这么多，它开始一个新行

1 个答案: