Question

因此，使用此函数，我会动态创建一些元素：

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();

})
},

Answer 1

我认为你需要这样做：

传递循环索引，如：fillCards(booksInfo[m], info.info, m);
获取索引作为参数：function fillCards(book, info, index){
将索引添加到项目的主要内容中：<div class='grid__column-bp1-12 grid__column-bp2-12 card' data-index='" + index + "'>
隐藏第一页之外的项目。在fillCards函数的底部：if (index >= 10) { card[book.bookId].style.display="none"; }
在页面的某处创建两个<button class="page-button prev" disabled="true">Previous page</button><button class="page-button next">Next page</button>（可能在#cardscontainer元素之后）
使用函数来管理分页，如下面的代码段所示：

＆＃13;

function doPaging() {
  var pageSize = 10, // Page size constant
      cardsContainer = document.getElementById("cardscontainer"),
      items = cardsContainer.querySelectorAll(".card-item"),
      currentPage = (cardsContainer.dataset.currentPage ? Number(cardsContainer.dataset.currentPage) : 1), // Get the current page. If not set(at first time), sets to 1
      goNext = this.className.indexOf("next") > -1; // Check if user wants to navigate to next page
      
  currentPage+= (goNext ? 1 : -1); // Set new page number
  cardsContainer.dataset.currentPage = currentPage; // Save it to the element's dataset
  
  // Calculating the pages limits
  var pageMax = currentPage * pageSize,
      pageMin = pageMax - pageSize,
      havesNext = false;
  
  // Loop through all items hidding or showing them
  items.forEach((item, i) => {
    
    item.style.display = (i >= pageMin && i < pageMax ? "block" : "none");
    
    // If there is any item after the max count...
    if (!havesNext && i > pageMax) {
      havesNext = true;
    }
  });
  
  // Enable/disable buttons
  document.querySelector("#buttons .next").disabled = !havesNext;
  document.querySelector("#buttons .prev").disabled = currentPage == 1;
}

// Set buttons' events
document.querySelectorAll("#buttons button").forEach(button => button.addEventListener("click", doPaging));

＆＃13;

<div id="cardscontainer">
  <div class="card-item">Item #1</div>
  <div class="card-item">Item #2</div>
  <div class="card-item">Item #3</div>
  <div class="card-item">Item #4</div>
  <div class="card-item">Item #5</div>
  <div class="card-item">Item #6</div>
  <div class="card-item">Item #7</div>
  <div class="card-item">Item #8</div>
  <div class="card-item">Item #9</div>
  <div class="card-item">Item #10</div>
  <div class="card-item" style="display:none">Item #11</div>
  <div class="card-item" style="display:none">Item #12</div>
  <div class="card-item" style="display:none">Item #13</div>
  <div class="card-item" style="display:none">Item #14</div>
  <div class="card-item" style="display:none">Item #15</div>
  <div class="card-item" style="display:none">Item #16</div>
  <div class="card-item" style="display:none">Item #17</div>
  <div class="card-item" style="display:none">Item #18</div>
  <div class="card-item" style="display:none">Item #19</div>
  <div class="card-item" style="display:none">Item #20</div>
  <div class="card-item" style="display:none">Item #21</div>
  <div class="card-item" style="display:none">Item #22</div>
  <div class="card-item" style="display:none">Item #23</div>
  <div class="card-item" style="display:none">Item #24</div>
  <div class="card-item" style="display:none">Item #25</div>
  <div class="card-item" style="display:none">Item #26</div>
  <div class="card-item" style="display:none">Item #27</div>
  <div class="card-item" style="display:none">Item #28</div>
  <div class="card-item" style="display:none">Item #29</div>
</div>
<div id="buttons">
  <button class="page-button prev" disabled="true">Previous page</button>
  <button class="page-button next">Next page</button>
</div>

＆＃13;

我是从头脑中做到的，所以我不确定如果没有任何更改/修复，它是否能顺利运行。关键是，步骤1到5会将您的html更改为我添加的代码段。任何问题随时都可以问。

在动态制作的元素中添加“下一个”

1 个答案: