Also muss ich eine if-Anweisung machen, dass, wenn ID 0 bis 3 (4 Bilder) geladen sind, eine neue Zeile von 0 bis 3 Bilder, das gleiche muss ich mit Wörtern tun (funktioniert wahrscheinlich gleich)if Anweisung, wenn so viel geladen ist, beginnt es eine neue Zeile
Ich bin ziemlich neu mit if Anweisungen usw. Ich weiß einfach nicht, wo ich anfangen soll .. Die Bilder und Wörter laden aus einer JSON-Datei und ich habe bereits das erste Bit der Codes.
Wie die var html = '<div class="row">'; zum html += '</div>'; Ich brauche eine if-Anweisung die Bilder Last in einer Reihe von 4 Bildern/Wörter Nexto einander zu lassen. Und dann automatisch eine neue Zeile erstellen.
Ich denke, es klingt kompliziert .. Ich hoffe, jemand kann mir helfen.
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 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);
});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>Wie Sie in HTML sehen kann ich diese Zeilen gemacht haben, die sie benötigen, einer werden und Schleife themselfes ein wenig wie <div class="col-md-2"> <img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'"> </div>
And this is what it needs to resemble closely.
Sie wollen für Schleife alle 3 Elemente zu überspringen, so dass Sie tun können, 'for (var i = 0; ich
Sie könnten den Modulo Operator verwenden: ' if ((i% 4) == 3) html + = '
Durch die So ist Ihr Code anfällig für HTML-Injection. Sie sollten entweder die Variablen umgehen, das DOM manuell mit document.createElement, document.createTextNode und Node.appendChild erstellen oder eine Templating-Engine verwenden. (Hier ist meins: https://mvsync.ch/) –