Erstellen mehrerer Vorlagen mit CSS

Was ich versuche zu erstellen ist mehrere Boxen oder Vorlagen (5 in jeder Zeile) von einem Film API, ich kann derzeit zeigen alle Daten, die ich brauche (kein reaktionsschnelles Design sein muss).Erstellen mehrerer Vorlagen mit CSS

Das Problem ist, wenn ich meine CSS-Klasse zu meinem Abschnitt hinzufügen „<section id="raiz"></section>“ es schafft nur eine Box ands sein von allem in der Ajax-Funktion überschreibt. Hier ist der Code:

var $peliculas = $.ajax({ 
 
    url: "http://api.tvmaze.com/shows", 
 
    dataType: "json", 
 
    method: "GET", 
 
    cache: false, 
 
    success: function(data) { 
 
    console.log(data); 
 
    for (var i = 0; i < data.length; i++) { 
 
     //raiz 
 
     var root = document.getElementById("raiz"); 
 
     //Elements 
 
     var Hipertexto = document.createElement("Hipertexto"); 
 
     var h1 = document.createElement("img"); 
 
     var puntuacion = document.createElement("puntuacion"); 
 
     var titulo = document.createElement("titulo"); 
 
     var generos = document.createElement("generos"); 
 
     Hipertexto.href = data[i].url; 
 
     h1.src = data[i].image.medium; 
 
     puntuacion.innerHTML = data[i].rating.average; 
 
     titulo.innerHTML = data[i].name; 
 
     generos.innerHTML = data[i].genres; 
 
     raiz.appendChild(titulo); 
 
     raiz.appendChild(generos); 
 
     Hipertexto.appendChild(h1); 
 
     raiz.appendChild(Hipertexto); 
 
     raiz.appendChild(puntuacion); 
 
    } 
 
    }, 
 
    error: function(data) { 
 
    console.log("Error"); 
 
    } 
 

 
});

.box { 
 
    float: left; 
 
    height: 300px; 
 
    width: 250px; 
 
    background-color: lavender; 
 
    border: solid 1px silver; 
 
}

<!DOCTYPE html> 
 
<html lang="es"> 
 

 
<head> 
 
    <meta charset="utf8"> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
</head> 
 

 
<body> 
 
    <header></header> 
 
    <main> 
 
    <section id="raiz"></section> 
 
    </main> 
 
    <footer></footer> 
 
    <script src="js/app.js" type="text/javascript"></script> 
 
</body> 
 

 
</html>

Wer einen Vorschlag, was zu tun?

Quelle

2017-03-07 KillerPollo

Ihr Code hat eine Reihe von Probleme .. Zuerst erstellen Sie Ihre eigenen HTML-Tags. Wenn Sie die Methode 'createElement' verwenden, um gültige HTML-Elemente wie' p' oder 'div' zu erzeugen ... können Sie nicht einfach irgendwelche Elemente erstellen, da dies HTML und nicht XML ist. Zweitens ... Sie müssen 'createElement' nicht verwenden, da Sie jQuery verwenden. Verwenden Sie daher jQuery-Selektoren. Sie Code ist ziemlich ungültig –

welche Art von jQuery Selektoren? – KillerPollo

Bitte, überprüfen Sie meine Antwort und wenn Sie irgendwelche Fragen haben, werde ich die Antwort entsprechend aktualisieren –

Ihr Code hat eine Reihe von Problemen .. Zuerst erstellen Sie Ihre eigenen HTML-Tags. Wenn Sie die Methode createElement verwenden, um gültige HTML-Elemente wie p oder div zu erstellen, können Sie nicht einfach irgendwelche Elemente erstellen, da dies html und nicht xml ist. Zweitens ... Sie müssen nicht createElement verwenden, da Sie jQuery verwenden, daher verwenden Sie jQuery-Selektoren. Ihr Code ist ziemlich ungültig.

Sie etwas versuchen gefällt das ... (dieser Code ist nicht perfekt, aber zeigt, wie jQuery verwenden Elemente im DOM anhängen)

$(document).ready(function() { 
 
$.ajax({ 
 
    url: "http://api.tvmaze.com/shows", 
 
    dataType: "json", 
 
    method: "GET", 
 
    cache: false, 
 
    success: function(data) { 
 
    for (var i = 0; i < data.length; i++) { 
 
     // turn the array result into string 
 
     var genre = data[i].genres.join(", "); 
 
     
 
     //eq helps you to pinpoint the exact li element you are creating inside the li array 
 
     $("#raiz ul").append('<li class="box"></li>'); 
 
     $("li").eq(i).append('<img src="' + data[i].image.medium + '"/>') 
 
        .append('<h2>' + data[i].name +'</h2>') 
 
        .append('<p>' + genre +'</p>') 
 
        .append('<p> Rating: ' + data[i].rating.average +'</p>'); 
 

 

 
    } 
 
    }, 
 
    error: function(data) { 
 
    console.log("Error"); 
 
    } 
 

 
}); 
 
});

.box { 
 
    display: inline-block; 
 
    width: 45%; 
 
    background-color: lavender; 
 
    border: solid 1px silver; 
 
    padding: 5px; 
 
} 
 

 
.box img { 
 
    display: block; 
 
    margin: auto; 
 
    width:100% 
 
    height: auto; 
 
} 
 

 
h2 { 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <header></header> 
 
    <main> 
 
     <section id="raiz"> 
 
      <ul> 
 
       
 
      </ul> 
 
     </section> 
 
    </main> 
 
    <footer></footer>

Quelle

2017-03-07 21:25:36

Ziemlich viel arbeitete wie beabsichtigt, nur ein paar kleinere zwickt, Genres ist eigentlich schon ein Array, so dass ich nicht die Zeile "var genre = Daten [i] .genres.join (","); " Vielen Dank. – KillerPollo

Erstellen mehrerer Vorlagen mit CSS

Antwort

Verwandte Themen