我是 javascript 的初学者，我遵循了滑块教程。一切正常，但它看起来像意大利面条代码

Question

我想将两个滑块放在页面上彼此靠近的位置。我在 youtube 上找到了一个教程，它运行得很好，但是这只适用于一个滑块。我设法修复为两个人工作，但是，我认为这可以以一种更好优雅的方式完成，而不是像意大利面条代码那样。我希望了解的是，我们如何以正确的方式使用循环和迭代，以及当我想在一页上创建多个幻灯片和循环时必须遵循的逻辑是什么。此页面底部是两个推荐滑块，我想在其中应用代码https://realestate.designordering.com/

这是我要修复的代码：

const next1 = document.querySelector('.next1');
const prev1 = document.querySelector('.prev1');

const slides1 = document.querySelectorAll('.slide1');

let index1 = 0;
display1(index1);
function display1 (index1) {
    slides1.forEach((slide) => {
        slide.style.display = 'none';
    });
    slides1[index1].style.display = 'flex';
}

function nextSlide1 () {
    index1++;
    if (index1 > slides1.length - 1) {
        index1 = 0;
    }
    display1(index1);
}
function prevSlide1 () {
    index1--;
    if (index1 < 0) {
        index1 = slides1.length - 1;
    }
    display1(index1);
}

//----------------------------------------------------------------


const next2 = document.querySelector('.next2');
const prev2 = document.querySelector('.prev2');

const slides2 = document.querySelectorAll('.slide2');

let index2 = 0;
display2(index2);
function display2 (index2) {
    slides2.forEach((slide) => {
        slide.style.display = 'none';
    });
    slides2[index2].style.display = 'flex';
}

function nextSlide2 () {
    index2++;
    if (index2 > slides2.length - 1) {
        index2 = 0;
    }
    display2(index2);
}
function prevSlide2 () {
    index2--;
    if (index2 < 0) {
        index2 = slides2.length - 1;
    }
    display2(index2);
}

next1.addEventListener('click', nextSlide1);
prev1.addEventListener('click', prevSlide1);

next2.addEventListener('click', nextSlide2);
prev2.addEventListener('click', prevSlide2);

我希望了解的是，我们如何以正确的方式使用循环和迭代，以及当我想在一页上创建多个幻灯片和循环时必须遵循的逻辑。

Answer 1

您可以通过使用函数来避免重复：

function mkslides(prev, next, slides) {
    let index = 0,
        display = () => {
            slides.forEach((slide) => {
                slide.style.display = 'none';
            });
            slides[index].style.display = 'flex';
        },
        nextSlide = () => {
            index++;
            if (index > slides.length - 1) {
               index = 0;
            }
            display();
        },
        prevSlide = () => {
            index--;
            if (index < 0) {
                index = slides.length - 1;
            }
            display();
        };
    next.addEventListener('click', nextSlide);
    prev.addEventListener('click', prevSlide);
    display();
}

mkslides(document.querySelector('.prev1'),
         document.querySelector('.next1'),
         document.querySelectorAll('.slide1'));
mkslides(document.querySelector('.prev2'),
         document.querySelector('.next2'),
         document.querySelectorAll('.slide2'));

PS：我认为你使用的“意大利面条代码”的含义不是通常的意思......你的意思可能是“复制意大利面”，指的是重复复制粘贴的代码（“意大利面条代码”通常意味着复杂和复杂很难遵循的流程，尤其是使用“goto”时）。