如何在JS中实现数组元素的上/下一个值切换展示功能

原代码存在的问题 #

• 用forEach给左侧按钮重复绑定点击事件，会触发多次不必要的逻辑
• 点击按钮时直接将整个数组赋值给innerHTML，无法显示单个元素
• 没有维护当前显示元素的索引，无法实现切换逻辑
• 未处理右侧按钮的点击事件

修复后的完整代码 #

HTML（无需修改）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="btn">
        <button class="lef"><<</button>
        <button class="rig">>></button>
    </div>
        <div class="text"></div>
    
    <script src="script.js"></script>
</body>
</html>

CSS（无需修改）

.btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);
    display: flex;
    gap: 420px;  
}
.lef, .rig{
    font-size: 70px;
    font-weight: 700;
    background: none;
    border: none;
    cursor: pointer;
}

.text{
    width: auto;
    height: 50px;
    font-size: 30px;
    background-color: antiquewhite;
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);
}

JavaScript（核心修复）

let fruits = ['apple','mango','banana','orange'];
let left = document.querySelector('.lef');
let right = document.querySelector('.rig');
let text = document.querySelector('.text');

// 维护当前显示元素的索引，初始为0（第一个元素）
let currentIndex = 0;

// 初始化显示第一个元素
text.innerHTML = fruits[currentIndex];

// 上一个按钮点击事件
left.addEventListener('click', () => {
    // 索引减1，若小于0则跳转到数组最后一个元素
    currentIndex = currentIndex - 1 < 0 ? fruits.length - 1 : currentIndex - 1;
    text.innerHTML = fruits[currentIndex];
});

// 下一个按钮点击事件
right.addEventListener('click', () => {
    // 索引加1，若超过数组长度则跳转到第一个元素
    currentIndex = currentIndex + 1 >= fruits.length ? 0 : currentIndex + 1;
    text.innerHTML = fruits[currentIndex];
});

关键逻辑说明 #

• 用currentIndex变量跟踪当前显示元素的位置，初始值设为0，对应数组第一个元素
• 点击左侧按钮时，索引递减，当索引小于0时，自动切换到数组最后一个元素（循环切换）
• 点击右侧按钮时，索引递增，当索引超过数组最大下标时，自动切换到数组第一个元素
• 每次点击后，根据更新后的索引更新显示内容

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