0

这是 app.js

const listItems=document.querySelector(".student-list").children;
const numberOfItems=10;
const page=document.querySelector(".page");

displayPage=(list,pageNumber)=> {
   const SI=(pageNumber*numberOfItems)-numberOfItems
   const EI=pageNumber*numberOfItems
   Array.of(list).forEach((item,index)=> {
      if (index>= SI && index<EI) {
         item.style.display="block";
      } else {
         item.style.display="none";
      }
   })
}

addPaginationLinks=(list)=> {
   const pages=list.length/10
   let html=``
   for (let i=0; i<pages; i++) {
      html+=`
      <li>
         <a class="active" href="#">${i+1}</a>
      </li>`
      return html
   }
   ul=document.createElement("UL");
   ul.innerHTML=html;
   div=document.createElement("DIV");
   div.className.add("pagination");
   div.appendChild(ul);
   page.appendChild(div);
}




displayPage(listItems, 1);
addPaginationLinks(listItems);

这是 index.html 的示例

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Students</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/design.css">
  </head>
  <body>
    <div class="page">
      <div class="page-header cf">
        <h2>Students</h2>
        <!-- dynamically insert search form here (optional) -->

      </div>
      <ul class="student-list">
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/67.jpg">
                <h3>iboya vat</h3>
                <span class="email">iboya.vat@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 07/15/15</span>
           </div>
        </li>
</ul>

html 中没有错误，它只是随着越来越多的 li 继续向下，然后以 ul 和结束 div 标签结束。然后脚本app js 稍后出现。

我收到一个未捕获的类型错误：无法设置未定义的 Array.forEach 的属性“显示”

基本上，它不会识别 for each 循环中列表中的每个项目。这是为什么？当我在控制台记录这些项目时，会显示 HTML 集合。

4

0 回答 0