点击左侧切换按钮时评论框消失的问题求助

大家好，我刚接触JavaScript不久，遇到了一个评论滑块的问题想请教一下：

我的评论滑块右侧按钮点击时功能正常，但当点击左侧按钮，试图从第一张幻灯片切换到最后一张时，评论框就消失了；不过再点击右侧按钮，评论框又能正常显示回来，我实在找不到问题出在哪。

以下是我的代码：

JavaScript 代码 #

const slides = document.querySelectorAll('.slide')
const leftBtn = document.getElementById('left')
const rightBtn = document.getElementById('right')

let activeSlide = 0

rightBtn.addEventListener('click', () => {
  activeSlide++

  if (activeSlide > slides.length - 1) {
    activeSlide = 0
  }

  setActiveSlide()
})

leftBtn.addEventListener('click', () => {
  activeSlide--

  if (activeSlide > slides.length - 1) {
    activeSlide = slides.length - 1
  }

  setActiveSlide()
})

function setActiveSlide() {
  slides.forEach(slide => {
    slide.classList.remove('active')
    slide.classList.add('hide')
  })

  slides[activeSlide].classList.add('active')
  slides[activeSlide].classList.remove('hide')
}

HTML 代码 #

<section class="section-recensies">
    <div class="recensies container">
        <h2>Recensies</h2>
        <div class="slider-container">

            <div class="recensie-box slide active">
                <p class="recensie-tekst">Recensie</p>
                <img src="{{ asset('images/logo/grace-business-group-lijn-met-kroon.png') }}"
                     alt="Logo Grace Business Group met lijn">
                <p>
                    <span>Naam</span>
                    <span>Bedrijf</span>
                </p>
            </div>

            <div class="recensie-box slide hide">
                <p class="recensie-tekst">Recensie</p>
                <img src="{{ asset('images/logo/grace-business-group-lijn-met-kroon.png') }}"
                     alt="Logo Grace Business Group met lijn">
                <p>
                    <span>Naam</span>
                    <span>Bedrijf</span>
                </p>
            </div>

            <div class="recensie-box slide hide">
                <p class="recensie-tekst">Recensie</p>
                <img src="{{ asset('images/logo/grace-business-group-lijn-met-kroon.png') }}"
                     alt="Logo Grace Business Group met lijn">
                <p>
                    <span>Naam</span>
                    <span>Bedrijf</span>
                </p>
            </div>

            <button class="recensie-button recensie-button-links" id="left">&lt;&lt;</button>
            <button class="recensie-button recensie-button-rechts" id="right">&gt;&gt;</button>

        </div>
    </div>
</section>

问题分析与解决方案 #

问题出在左侧按钮的事件处理逻辑里！你现在的判断条件写反了：

当点击左侧按钮时，activeSlide是递减的，当它变成-1（也就是从第一张再往左切），你当前的判断是if (activeSlide > slides.length - 1)——这个条件永远不会触发，因为-1肯定小于最大索引值。这就导致activeSlide变成了-1，而slides[-1]是不存在的（undefined），所以setActiveSlide函数里，所有幻灯片都被加上了hide类，但没有任何幻灯片能被加上active类，自然评论框就消失了。

只需要把左侧按钮的判断条件改成检查activeSlide < 0即可：

leftBtn.addEventListener('click', () => {
  activeSlide--

  if (activeSlide < 0) { // 修正判断条件
    activeSlide = slides.length - 1
  }

  setActiveSlide()
})

这样当activeSlide递减到-1时，就会自动切换到最后一张幻灯片的索引（slides.length - 1），setActiveSlide就能正确找到对应的幻灯片，给它加上active类并移除hide类，就不会出现消失的问题了。

备注：内容来源于stack exchange，提问作者Kaye