PHP实现课程内容PREV/NEXT按钮导航逻辑求助

问题背景 #

正在开发类似Udemy的课程内容导航功能，通过PREV和NEXT按钮切换课程节点，基于PHP开发。已从数据库获取课程内容存入数组$contentNodes，数组结构如下：

array (size=23)
  'id' => string '71822' (length=5)
  'content_type' => string '5' (length=1)
  'title' => string 'Glosario de términos 4' (length=23)
  'order_id' => string '37.00000' (length=8)
  'class_id' => null
  'course_id' => string '4765' (length=4)
  'status' => string '0' (length=1)
  'image_thumbnail' => null
  'items_count' => string '0' (length=1)
  'formatedTitle' => string 'glosario-de-terminos-4' (length=22)
  'checked' => boolean false
  'current' => int 0
  'tipo' => string 'pdf' (length=3)
  'link' => string '<a href="/student/course/text/12944?title=glosario-de-terminos-4">Glosario de términos 4</a>' (length=93)

当前卡在按钮切换内容的逻辑实现，以及首尾节点时按钮的禁用/隐藏处理，现有代码如下：

<div class="col-12">
    <?php
    /*echo '<pre>';
    var_dump(count($contentNodes));
    echo '</pre>';*/
    foreach ($contentNodes as $key => $content) {
        echo '<pre>';
        var_dump($content, "FILA");
        echo '</pre>';
    }
    ?>
    <div class="row">
        <div class="col-6">
            <a href="#" class="btn btn-secondary btn-block" id="prev-page" data-page="">PREV</a>
        </div>
        <div class="col-6">
            <a href="#" class="btn btn-primary btn-block" id="next-page" data-page="">NEXT</a>
        </div>
    </div>
   
</div>

解决方案 #

1. 核心思路

• 通过URL参数current记录当前节点索引，确保页面刷新后状态不丢失
• 仅渲染当前节点内容，避免遍历整个数组浪费资源
• 根据当前索引判断按钮状态：首节点禁用PREV，尾节点禁用NEXT

2. 基础PHP实现代码

<?php
// 1. 初始化当前索引，强制限制在有效范围内
$totalNodes = count($contentNodes);
$currentIndex = isset($_GET['current']) ? (int)$_GET['current'] : 0;
$currentIndex = max(0, min($currentIndex, $totalNodes - 1));
$currentContent = $contentNodes[$currentIndex];
?>

<div class="col-12 course-content">
    <!-- 渲染当前课程核心内容 -->
    <h3><?php echo htmlspecialchars($currentContent['title']); ?></h3>
    <?php echo $currentContent['link']; ?>
    <!-- 可按需添加更多字段，比如内容类型、缩略图等 -->
</div>

<div class="row">
    <div class="col-6">
        <?php if ($currentIndex > 0): ?>
            <a href="?current=<?php echo $currentIndex - 1; ?>" class="btn btn-secondary btn-block" id="prev-page">PREV</a>
        <?php else: ?>
            <!-- 禁用状态用button代替a标签，避免无效点击 -->
            <button class="btn btn-secondary btn-block disabled" id="prev-page" disabled>PREV</button>
        <?php endif; ?>
    </div>
    <div class="col-6">
        <?php if ($currentIndex < $totalNodes - 1): ?>
            <a href="?current=<?php echo $currentIndex + 1; ?>" class="btn btn-primary btn-block" id="next-page">NEXT</a>
        <?php else: ?>
            <button class="btn btn-primary btn-block disabled" id="next-page" disabled>NEXT</button>
        <?php endif; ?>
    </div>
</div>

3. 无刷新优化（AJAX方案）

如果需要更流畅的无刷新切换体验，可结合JavaScript实现：

前端JS代码

// 更新导航按钮状态
function updateNavButtons(currentIndex, totalNodes) {
    const prevBtn = document.getElementById('prev-page');
    const nextBtn = document.getElementById('next-page');

    // 处理PREV按钮
    if (currentIndex === 0) {
        prevBtn.classList.add('disabled');
        prevBtn.disabled = true;
    } else {
        prevBtn.classList.remove('disabled');
        prevBtn.disabled = false;
        prevBtn.dataset.page = currentIndex - 1;
    }

    // 处理NEXT按钮
    if (currentIndex === totalNodes - 1) {
        nextBtn.classList.add('disabled');
        nextBtn.disabled = true;
    } else {
        nextBtn.classList.remove('disabled');
        nextBtn.disabled = false;
        nextBtn.dataset.page = currentIndex + 1;
    }
}

// 绑定PREV按钮点击事件
document.getElementById('prev-page').addEventListener('click', function(e) {
    if (this.classList.contains('disabled')) return;
    e.preventDefault();
    const targetIndex = parseInt(this.dataset.page);
    fetch(`/get-course-content.php?current=${targetIndex}`)
        .then(res => res.json())
        .then(data => {
            // 更新内容区域
            document.querySelector('.course-content').innerHTML = `
                <h3>${data.title}</h3>
                ${data.link}
            `;
            // 更新URL状态（不刷新页面）
            history.pushState({current: targetIndex}, '', `?current=${targetIndex}`);
            // 更新按钮状态
            updateNavButtons(targetIndex, data.total);
        });
});

// 绑定NEXT按钮点击事件
document.getElementById('next-page').addEventListener('click', function(e) {
    if (this.classList.contains('disabled')) return;
    e.preventDefault();
    const targetIndex = parseInt(this.dataset.page);
    fetch(`/get-course-content.php?current=${targetIndex}`)
        .then(res => res.json())
        .then(data => {
            document.querySelector('.course-content').innerHTML = `
                <h3>${data.title}</h3>
                ${data.link}
            `;
            history.pushState({current: targetIndex}, '', `?current=${targetIndex}`);
            updateNavButtons(targetIndex, data.total);
        });
});

// 页面加载时初始化按钮状态
const initialIndex = parseInt(new URLSearchParams(window.location.search).get('current')) || 0;
updateNavButtons(initialIndex, <?php echo $totalNodes; ?>);

后端接口（get-course-content.php）

<?php
// 复用你的$contentNodes获取逻辑（从数据库/缓存）
$contentNodes = ...;

$totalNodes = count($contentNodes);
$currentIndex = isset($_GET['current']) ? (int)$_GET['current'] : 0;
$currentIndex = max(0, min($currentIndex, $totalNodes - 1));
$currentContent = $contentNodes[$currentIndex];

echo json_encode([
    'title' => htmlspecialchars($currentContent['title']),
    'link' => $currentContent['link'],
    'total' => $totalNodes
]);
?>

内容的提问来源于stack exchange，提问作者Francisco Morales