我有 json api，它是一个书籍列表及其属性:标题、作者等。我需要输出格式化为 html 的数据。我为此使用 es6 backtics 和 javascript 模板。但我遇到的问题是输出不是对 html 页面的一次迭代，而是每两次迭代。来自 json 的每个对象都进入一个 html 卡。但是我的页面每行需要两张卡片。所以我需要每两次迭代插入一个开始行 div，每两次迭代插入一个结束行 div，以便在开始行和结束 div 之间我有两张卡片。我首先想到将我的模板放在一个变量中，但这没有用。其次，我把它放在一个带有 return 语句的函数中。这次工作，但我可以正确插入行标签......有人可以建议更简单的方法来做到这一点吗？谢谢 这是 index.html 页面。两张牌排成一排。我事先不知道我需要多少张卡。输出将发布到列表输出 ID。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Book Finder</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="title" class="center">
<h1 class="text-center mt-5">Book Finder</h1>
<div class="row">
<div id="input" class="input-group mx-auto col-lg-6 col-md-8 col-sm-12">
<input id="search-box" type="text" class="form-control" placeholder="Search Books!...">
<button id="search" class="btn btn-primary" onclick="">Search</button>
</div>
</div>
</div>
<div class="book-list" >
<h2 class="text-center">Search Result</h2>
<div id="list-output" class="">
<div class="row">
<!-- card -->
<div class="col-lg-6">
<div class="card" style="">
<div class="row no-gutters">
<div class="col-md-4">
<img src="" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Book Title</h5>
<p class="card-text">Author</p>
<p class="card-text"><small class="text-muted">Publisher: </small></p>
<a href="${bookLink}" class="btn btn-secondary">More Info</a>
</div>
</div>
</div>
</div>
</div>
<!-- card -->
<div class="col-lg-6">
<div class="card" style="">
<div class="row no-gutters">
<div class="col-md-4">
<img src="" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Book Title</h5>
<p class="card-text">Author</p>
<p class="card-text"><small class="text-muted">Publisher: </small></p>
<a href="${bookLink}" class="btn btn-secondary">More Info</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="/css/style.css">
<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="js/index.js"></script>
</body>
</html>
$(document).ready(function() {
var item, tile, author, publisher, bookLink, bookImg;
var outputList = document.getElementById("list-output");
//listener for search button
$("#search").click(function() {
$("#title").animate({'margin-top': '5px'}, 1000);
// $(".book-list").css("visibility", "visible");
var searchData = $("#search-box").val();
if(searchData === "") {
// dsiplayErr();
} else {
console.log(searchData);
$.get("https://www.googleapis.com/books/v1/volumes?q="+searchData, function(response) {
for (var i = 0; i < response.items.length; i++) {
item = response.items[i];
title = item.volumeInfo.title;
author = item.volumeInfo.authors;
publisher = item.volumeInfo.publisher;
bookLink = item.selfLink;
bookImg = item.volumeInfo.imageLinks.thumbnail;
// in production code, item.text should have the HTML entities escaped.
if( (i+2) % 2 != 0) {
console.log("odd")
outputList.innerHTML += `<div class="row">`;
}
outputList.innerHTML += formatOutput(title, author, bookLink, bookImg);
if((i+2) % 2 == 0) {
console.log("even")
outputList.innerHTML += `</div>`;
}
console.log(outputList.innerHTML);
}
});
}
});
});
function formatOutput(title, author, publisher, bookLink, bookImg) {
// console.log(title + ""+ author +" "+ publisher +" "+ bookLink+" "+ bookImg)
var htmlCard1 = `<div class="col-lg-6">
<div class="card" style="">
<div class="row no-gutters">
<div class="col-md-4">
<img src="${bookImg}" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">Author: ${author}</p>
<p class="card-text"><small class="text-muted">Publisher: ${publisher}</small></p>
</div>
</div>
</div>
</div>
</div>`
return htmlCard1;
}最佳答案
我删除了一些我认为不必要的行，但如果您愿意，可以将它们添加回去。以下代码应按预期工作
$(document).ready(function () {
var item, tile, author, publisher, bookLink, bookImg;
var outputList = $("#list-output");
//listener for search button
$("#search").click(function () {
var searchData = $("#search-box").val();
if (searchData === "") {
// dsiplayErr();
} else {
console.log(searchData);
$.get("https://www.googleapis.com/books/v1/volumes?q=" + searchData, function (response) {
for (var i = 0; i < response.items.length; i++) {
item = response.items[i];
title = item.volumeInfo.title;
author = item.volumeInfo.authors;
publisher = item.volumeInfo.publisher;
bookLink = item.selfLink;
bookImg = item.volumeInfo.imageLinks.thumbnail;
// in production code, item.text should have the HTML entities escaped.
var html;
if ((response.items.length % 2 != 0) && (i == response.items.length - 1)) {
html = "";
html += "<div class='row'>";
html += formatOutput(title, author, publisher, bookLink, bookImg);
html += "</div>";
outputList.append(html);
}
else {
if (i % 2 == 0) {
html = "";
html += "<div class='row'>";
}
html += formatOutput(title, author, publisher, bookLink, bookImg);
if (i % 2 != 0) {
html += "</div>";
outputList.append(html);
}
}
}
});
}
});
});
function formatOutput(title, author, publisher, bookLink, bookImg) {
// console.log(title + ""+ author +" "+ publisher +" "+ bookLink+" "+ bookImg)
var htmlCard1 = `<div class="col-lg-6">
<div class="card" style="">
<div class="row no-gutters">
<div class="col-md-4">
<img src="${bookImg}" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">Author: ${author}</p>
<p class="card-text"><small class="text-muted">Publisher: ${publisher}</small></p>
<a href="${bookLink}" class="btn btn-secondary">More Info</a>
</div>
</div>
</div>
</div>
</div>`
return htmlCard1;
}
关于javascript - 将 javascript 模板输出到行 div 内的 html 页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54869492/