0
所以用這個功能我動態創建的一些元素：增加「下一個」
function fillCards(book,info){
document.getElementById('evengeduld').style.display = "none";
var cardscontainer = document.getElementById('cardscontainer');
var card = [];
var a = "<div class='grid__column-bp1-12 grid__column-bp2-12 card'><div class='cardheader'><div class='clearfix'><h3>";
var b = "</h3><form class='reserverenbutton'><button type='button' onclick='App.reserveren()'>Reserveren</button></form></div><div class='clearfix'><h4>";
var c = " |</h4><h5> ";
var d = "</h5> </div> </div> <div id='cardinfo'>";
var e = "</div> <div id='cardreviews'><p> ";
var f = " </p></div> <div class='cardtabs'> <button class='cardtab bluetab' onclick='App.tabbladen(this)'> Info</button> <button class='cardtab redtab' onclick='App.tabbladen(this)'> Reviews</button></div></div></div>";
card[book.bookId] = document.createElement("div");
card[book.bookId].id = "kaart" + book.bookId;
var cardContent = a + book.title + b + book.author + c + book.type + d + info + e + "reviews" + f;
cardscontainer.appendChild(card[book.bookId]);
document.getElementById(card[book.bookId].id).innerHTML = cardContent;
}
所以我得到這樣的：
本書的信息來自於非常大的json，我循環訪問並且訪問者可以搜索該集合。我現在要做的是，如果有超過10個結果，請添加「下一個」和「上一個」按鈕來瀏覽結果。但我不知道如何實現這一點。
猜我需要
if (cardscontainer.children.length < 10)
但下一步怎麼走？
任何提示和技巧？
謝謝！ :)
SearchBooks: function(searchterm) {
var cardscontainer = document.getElementById('cardscontainer');
cardscontainer.innerHTML = "<p id='evengeduld' class='addmargin'> Even geduld, we doorlopen onze database.</p>";
var searchtermAuthor;
var searchtermTitle;
var searchtermTrefwoord;
for (var t = 0; t < searchterm.length; t++){
if(searchterm[t].zoekcriteria === "auteur"){
searchtermAuthor = searchterm[t].zValue;
}
if(searchterm[t].zoekcriteria === "titel"){
searchtermTitle = searchterm[t].zValue;
}
if(searchterm[t].zoekcriteria === "trefwoord"){
searchtermTrefwoord = searchterm[t].zValue;
}
}
Utils.returndataWerken(function(ruba){
this.API_URL = 'https://annehaeg.github.io/data/openbeschrijving.json';
var xhr = new XMLHttpRequest();
xhr.open('get', this.API_URL, true);
xhr.responseType = 'json';
xhr.onload = function() {
if (xhr.status === 200) {
var data = (!xhr.responseType) ? JSON.parse(xhr.response) : xhr.response;
var books = [];
var booksInfo = [];
for (var i = 0; i< data.length; i++) {
var obj = data[i];
var ISBN = obj.ISBN;
var authorFirstname = obj.author_firstname;
var authorLastname = obj.author_lastname;
var author = authorFirstname + " " + authorLastname;
var title = obj.title;
var type = obj.type;
var bookId = obj.id;
books[i] = {
'ISBN': ISBN,
'authorFirstname': authorFirstname,
'authorLastname': authorLastname,
'author': author,
'title': title,
'type': type,
'bookId': bookId
};
var auteurIf = true;
var titelIf = true;
var trefwoordIf = true;
var groupIf = [];
var ifstatement = false;
if(searchtermAuthor !== undefined){
if(books[i].authorFirstname !== undefined && books[i].authorLastname !== undefined && books[i].author !== undefined){
auteurIf = (books[i].authorFirstname.toUpperCase() === searchtermAuthor.toUpperCase() || books[i].authorLastname.toUpperCase() === searchtermAuthor.toUpperCase() || books[i].author.toUpperCase() === searchtermAuthor.toUpperCase());
}
else{
auteurIf = false;
}
}
if(searchtermTitle !== undefined){
if(books[i].title !== undefined) {
titelIf = (books[i].title.toUpperCase() === searchtermTitle.toUpperCase());
}
else{
titelIf = false;
}
}
if(searchtermTrefwoord !== undefined){
if(books[i].title !== undefined) {
trefwoordIf = (books[i].title.toUpperCase().indexOf(searchtermTrefwoord.toUpperCase()) >= 0);
}
else{
trefwoordIf = false;
}
}
groupIf.push(auteurIf, titelIf, trefwoordIf);
ifstatement = auteurIf && titelIf && trefwoordIf;
if (ifstatement) {
console.log('jep');
for (var m = 0; m < ruba.length; m++){
if(books[i].bookId === ruba[m].BKBBNummer){
var objWerken = ruba[m];
var werkIDW = objWerken.WerkID;
var BKBBnrW = objWerken.BKBBNummer;
var titelW = objWerken.Titel;
var editieW = objWerken.Editie;
var ISBNW = objWerken.ISBN;
var jaarW = objWerken.JaarVanUitgave;
var taalW = objWerken.TaalPublicatie;
var typeW = objWerken.SoortMateriaal;
booksInfo[m] = {
'bookId': books[i].bookId,
'title': books[i].title,
'author': books[i].author,
'ISBN': ISBNW,
'werkID': werkIDW,
'BKBBnr': BKBBnrW,
'titel': titelW,
'editie': editieW,
'jaar': jaarW,
'taal': taalW,
'type': typeW
};
var info = gegevens(booksInfo[m]);
fillCards(booksInfo[m], info.info);
}
}
}
}
var message = "<p id='errormessage' class='addmargin'> Sorry, We hebben geen resultaten gevonden voor de ingegeven zoektermen. </p>";
if(cardscontainer.children.length === 1){
cardscontainer.innerHTML = message;
}
}
else {
console.log('error');
}
};
xhr.onerror = function() {
console.log('Error');
};
xhr.send();
})
},
這應該在數據循環中進行。循環在哪裏？ – DontVoteMeDown
嘿，謝謝你的回覆。添加了上面的循環。這是巨大的 - 對不起， - 這就是爲什麼我之前沒有添加它... – Annelien
關於這方面的任何消息？ – DontVoteMeDown