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

Question

所以我需要做一个 if 语句，每当加载 id 0 到 3（4 个图像）时，创建一个新行 0 到 3 个图像，这同样需要用词来处理（可能适用于相同）

我对 if 语句等很陌生。我只是不知道从哪里开始.. 图片和文字从 JSON 文件加载，我已经有了第一位代码。

喜欢 var html = '<div class="row">'; 到 html += '</div>'; 我需要一个 if 语句来让图像以 4 images/words 相邻的一行加载。然后自动新建一行。

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

JSON,

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

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 Whosebug 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);

});

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;*/
}

<!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>

正如您在 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 语句，它开始一个新行

if statement when so much is loaded, it begins a new row

html

javascript

json

if-statement

bootstrap-modal