如何实现分页箭头的前后翻页功能？

问题根源分析 #

ChatGPT生成的代码存在三个核心缺陷：

• 初始currentPage值硬编码为0，未匹配当前页面的实际页码（比如第2页时初始值就会错误）
• changePage函数仅更新了变量值，未执行页面跳转操作
• pageLinks选择了所有.w3-bar-item元素，包含了「...」「Oppgaver」等非分页链接，导致页码索引计算错误

修复后的完整代码 #

以第1页为例（其他页面只需修改w3-grey类所在的按钮即可）：

{% extends "fagbase.html" %}

{% block title %}
{% endblock %}

{% block content %}

<head>
    <br><br>
      <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='home.css') }}">
    
</head>

<body>
    <div class="navbar">
        <div class="title">1P
            <img src="{{ url_for('static', filename='math.png') }}" alt="Logo" class="logo">
        </div>
        
    </div>
</body>
<br>

<div class="w3-bar w3-border">
    <a class="w3-bar-item w3-button w3-ripple" onclick="changePage('prev')">&laquo;</a>
    <a href="/vgs/1P/1" id="page1" class="w3-bar-item w3-button w3-ripple w3-grey">1</a>
    <a href="/vgs/1P/2" id="page2" class="w3-bar-item w3-button w3-ripple">2</a>
    <a href="/vgs/1P/3" id="page3" class="w3-bar-item w3-button w3-ripple">3</a>
    <a href="/vgs/1P/4" id="page4" class="w3-bar-item w3-button w3-ripple">4</a>
    <a href="#" class="w3-bar-item w3-button w3-ripple">...</a>
    <a href="#" id="oppgaver" class="w3-bar-item w3-button w3-ripple">Oppgaver</a>
    <a href="#" id="losningsforslag" class="w3-bar-item w3-button w3-ripple">Løsningsforslag</a>
    <a class="w3-bar-item w3-button w3-ripple" onclick="changePage('next')">&raquo;</a>
</div>

<script>
    // 仅筛选id以page开头的分页链接，排除无关元素
    const pageLinks = Array.from(document.querySelectorAll('a[id^="page"]'));
    // 根据w3-grey类自动定位当前页码的索引
    const currentPageElement = document.querySelector('.w3-grey[id^="page"]');
    let currentPage = pageLinks.indexOf(currentPageElement);

    function changePage(direction) {
        // 上一页逻辑：边界判断+页面跳转
        if (direction === 'prev' && currentPage > 0) {
            currentPage--;
            window.location.href = pageLinks[currentPage].href;
        } 
        // 下一页逻辑：边界判断+页面跳转
        else if (direction === 'next' && currentPage < pageLinks.length - 1) {
            currentPage++;
            window.location.href = pageLinks[currentPage].href;
        }
    }
</script>

{% endblock %}

关键修复点说明 #

1. 精准筛选分页链接：用a[id^="page"]选择器仅保留真正的分页按钮，避免无关元素干扰索引计算
2. 自动识别当前页码：通过pageLinks.indexOf(currentPageElement)动态获取当前页面的索引，无需硬编码初始值
3. 添加页面跳转逻辑：在changePage函数中通过window.location.href触发实际的页面跳转
4. 保留边界校验：防止在第一页点击«、最后一页点击»时执行无效操作

内容的提问来源于stack exchange，提问作者Kasper Aune Dahl