前端大佬们帮忙看看js还能不能再省略一下代码？

站长

2024年06月28日 09:01 · 阅读数 19

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="css/bass.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <!-- news数据 -->
    <div class="container">
    </div>
    <!-- 分页器 -->
    <div class="pagination"></div>
</body>
</html>
JS
$(function () {
  axios({
    url: 'js/news.json'
  }).then(result => {
    const pageSize = 10; // 每页显示的数量
    let currentPage = 1; // 当前页码
    // 生成分页HTML
    function newPageHTML(total, pageSize, currentPage) {
      const totalPages = Math.ceil(total / pageSize);
      let paginationHTML = '<a href="##" class="a">首页</a><a href="##" class="a">上一页</a>';
      const maxList = 10;
      let startPage = Math.max(currentPage - Math.floor(maxList / 2), 1);
      let endPage = Math.min(startPage + maxList - 1, totalPages);
      if (endPage - startPage < maxList - 1) {
        startPage = Math.max(endPage - maxList + 1, 1);
      }
      for (let i = startPage; i <= endPage; i++) {
        paginationHTML += `<a href='##' class="${i === currentPage ? 'active ' : ''}a">${i}</a>`;
      }
      paginationHTML += '<a href="##" class="a">尾页</a><a href="##" class="a">下一页</a>';
      return paginationHTML;
    }
    // 根据页码显示新闻列表
    function newNews(page) {
      currentPage = page;
      const startIndex = (currentPage - 1) * pageSize;
      const endIndex = Math.min(startIndex + pageSize - 1, result.data.length - 1);
      // 根据索引切片获取当前页的新闻数据
        const dataList = result.data.slice(startIndex, endIndex + 1).map(item => `
          <div class='box'>
            <a href="javascript:;">
              <div class='aBox'>
                <img src="${item.images}" alt="">
              </div>
            </a>
            <div class="right">
              <h2>${item.title}</h2>
              <span>${item.time}</span>
              <p>${item.paragraph}</p>
            </div>
          </div>
        `).join("");
      $(".container").html(dataList);
      // 生成分页HTML并更新页面
      const paginationHTML = newPageHTML(result.data.length, pageSize, currentPage);
      $(".pagination").html(paginationHTML);
    }
    // 初始化分页和新闻列表
    newNews(currentPage);
    // 点击页码链接切换页码
    $(".pagination").on("click", ".a", function () {
      const page = $(this).text();
      currentPage = page === "首页" ? 1 :
        page === "尾页" ? Math.ceil(result.data.length / pageSize) :
          page === "上一页" ? Math.max(currentPage - 1, 1) :
            page === "下一页" ? Math.min(currentPage + 1, Math.ceil(result.data.length / pageSize)) :
              parseInt(page);
      newNews(currentPage);
    });
  });
});

1个回答

test

2024-06-28

$(function () {
  axios({
    url: 'js/news.json'
  }).then(result => {
    const pageSize = 10; // 每页显示的数量
    let currentPage = 1; // 当前页码

    // 生成分页HTML
    function newPageHTML(total, pageSize, currentPage) {
      const totalPages = Math.ceil(total / pageSize);
      let paginationHTML = '<a href="##" class="a">首页</a><a href="##" class="a">上一页</a>';
      const maxList = 10;
      let startPage = Math.max(currentPage - Math.floor(maxList / 2), 1);
      let endPage = Math.min(startPage + maxList - 1, totalPages);
      if (endPage - startPage < maxList - 1) {
        startPage = Math.max(endPage - maxList + 1, 1);
      }
      for (let i = startPage; i <= endPage; i++) {
        paginationHTML += `<a href='##' class="${i === currentPage ? 'active ' : ''}a">${i}</a>`;
      }
      paginationHTML += '<a href="##" class="a">尾页</a><a href="##" class="a">下一页</a>';
      return paginationHTML;
    }

    // 根据页码显示新闻列表
    function newNews(page) {
      currentPage = page;
      const startIndex = (currentPage - 1) * pageSize;
      const endIndex = Math.min(startIndex + pageSize - 1, result.data.length - 1);
      const dataList = result.data.slice(startIndex, endIndex + 1).map(item => `
        <div class='box'>
          <a href="javascript:;">
            <div class='aBox'>
              <img src="${item.images}" alt="">
            </div>
          </a>
          <div class="right">
            <h2>${item.title}</h2>
            <span>${item.time}</span>
            <p>${item.paragraph}</p>
          </div>
        </div>
      `).join("");
      $(".container").html(dataList);
      const paginationHTML = newPageHTML(result.data.length, pageSize, currentPage);
      $(".pagination").html(paginationHTML);
    }

    // 初始化分页和新闻列表
    newNews(currentPage);

    // 点击页码链接切换页码
    $(".pagination").on("click", ".a", function () {
      const page = $(this).text();
      currentPage = page === "首页" ? 1 :
        page === "尾页" ? Math.ceil(result.data.length / pageSize) :
          page === "上一页" ? Math.max(currentPage - 1, 1) :
            page === "下一页" ? Math.min(currentPage + 1, Math.ceil(result.data.length / pageSize)) :
              parseInt(page);
      newNews(currentPage);
    });
  });
});

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容