使用css創建多個模板

我想要做的是從電影API創建多個框或模板（每行5個），我目前可以顯示我需要的所有數據（不需要是響應式設計）。使用css創建多個模板

的問題是，如果我加入我的CSS類來我科「<section id="raiz"></section>」它只是創建了一個盒子ANDS其由AJAX功能內的一切覆蓋。這裏是代碼：

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>

任何人有一個建議，怎麼辦呢？

來源

2017-03-07 KillerPollo

代碼有一堆問題..首先你正在創建你自己的HTML標籤。當你使用'createElement'方法創建像'p'或'div'這樣的有效HTML元素時，你不能只創建任何元素，因爲這是html而不是xml。其次......你不需要像使用jQuery一樣使用'createElement'，因此使用jQuery選擇器。你的代碼是非常無效的 –

什麼樣的jQuery選擇器？ – KillerPollo

請檢查我的答案，如果您有任何問題，我會相應地更新答案 –

您的代碼有一堆問題。首先您要創建自己的HTML標記。當你使用方法createElement是創建有效的HTML元素，如P或DIV ...你不能只是創建任何元素，因爲這是HTML而不是XML。其次......您不需要使用createElement，因爲您使用jQuery，因此使用jQuery選擇器。你的代碼非常無效。

你可以嘗試一些喜歡這個......（這段代碼並不完美，但展示瞭如何使用jQuery追加的DOM元素）

$(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>

來源

2017-03-07 21:25:36

相當符合預期的工作，只是添加了一些小調整，流派實際上已經是一個數組，因此我並不需要行「var genre = data [i] .genres.join（「，」）;「非常感謝。 – KillerPollo

使用css創建多個模板

回答

相關問題