PHP如何访问数组中的上一个、下一个元素实现内容翻页功能

你可以用原生JavaScript实现该需求，核心逻辑是通过变量记录当前展示的数组索引，点击按钮后修改索引值再重新渲染内容即可。

实现逻辑 #

• 先定义目标数组
• 初始化当前索引值为0，页面加载时默认渲染索引为0的数组元素内容
• 给「上一个」按钮绑定点击事件：索引大于0时索引减1，边界位置可选择禁用按钮避免无效操作
• 给「下一个」按钮绑定点击事件：索引小于数组总长度-1时索引加1，同理处理边界
• 每次索引变更后，将对应数组元素的内容更新到页面展示节点中

完整示例代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内容切换示例</title>
</head>
<body>
    <!-- 内容展示区域 -->
    <div class="content-box">
        <p>问题：<span id="question"></span></p>
        <p>答案：<span id="answer"></span></p>
    </div>
    <!-- 操作按钮 -->
    <button id="prevBtn">上一个</button>
    <button id="nextBtn">下一个</button>

    <script>
        // 你的目标数组
        const dataList = [
            {
                id: 1,
                question: 'first question',
                answer: 'first answer'
            },
            {
                id: 2,
                question: 'second question',
                answer: 'second answer'
            }
        ]
        // 初始化当前索引
        let currentIndex = 0
        // 获取DOM节点
        const questionEl = document.getElementById('question')
        const answerEl = document.getElementById('answer')
        const prevBtn = document.getElementById('prevBtn')
        const nextBtn = document.getElementById('nextBtn')

        // 内容渲染公共方法
        function renderContent() {
            const currentData = dataList[currentIndex]
            questionEl.innerText = currentData.question
            answerEl.innerText = currentData.answer
            // 边界禁用按钮逻辑，不需要可以删除
            prevBtn.disabled = currentIndex === 0
            nextBtn.disabled = currentIndex === dataList.length - 1
        }

        // 绑定按钮点击事件
        prevBtn.addEventListener('click', () => {
            if (currentIndex > 0) {
                currentIndex--
                renderContent()
            }
        })
        nextBtn.addEventListener('click', () => {
            if (currentIndex < dataList.length - 1) {
                currentIndex++
                renderContent()
            }
        })

        // 页面加载默认渲染第一条内容
        renderContent()
    </script>
</body>
</html>

如果不需要边界禁用按钮的逻辑，直接删除renderContent方法里两行给disabled赋值的代码即可。

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