Javascript 未捕获类型错误：幻灯片[n]。显示不是函数

请帮我纠正这个错误。在过去的几个小时内无法解决此问题。在函数showSlide（）中，jQuery似乎不起作用，但我不明白为什么

slider.html

<section class="slider-container">
    <div class="slide-item">
        <img src="http://via.placeholder.com/1440x600" alt="" class="fx-img">
        <div class="min-text-block"></div>
        <div class="title-block"></div>
        <div class="description-block"></div>
    </div>
    <div class="slide-item">
        <img src="http://via.placeholder.com/1430x600" alt="" class="fx-img">
        <div class="min-text-block"></div>
        <div class="title-block"></div>
        <div class="description-block"></div>
    </div>
    <a class="slider-prev">&#10094;</a>
    <a class="slider-next">&#10095;</a>
</section>

custom.js

$(function () {
    //SLIDESHOW

    var slideIndex = 1,
        nextSlide = $('.slider-next'),
        prevSlide = $('.slider-prev');

    showSlide(slideIndex);

    prevSlide.on('click', function () {
        slideIndex--;
        showSlide(slideIndex);
    });
    nextSlide.on('click', function () {
        slideIndex++;
        showSlide(slideIndex);
    });

    function showSlide(n) {
        var i,
            slides = $('.slide-item'),
            dots = $('.slider-dot');

        if ( n > slides.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = slides.length
        }
        $.each(slides, function () {
            $(this).hide();
        });
        console.log(slides[n-1]);
        slides[n-1].show();
    }

});

$（函数（）{
//幻灯片放映
var slideIndex=1，
nextSlide=$（'.slider next'），
prevSlide=$（'.slider prev'）；
放映幻灯片（幻灯片索引）；
prevSlide.on（'单击'，函数（）{
滑动索引--；
放映幻灯片（幻灯片索引）；
});
nextSlide.on（'click'，函数（）{
slideIndex++；
放映幻灯片（幻灯片索引）；
});
功能演示幻灯片（n）{
var i，
幻灯片=$（“.幻灯片项目”），
点=$（'滑块点'）；
如果（n>幻灯片长度）{
slideIndex=1
}
if（n<1）{
slideIndex=slides.length
}
$。每个（幻灯片、函数（）{
$（this.hide（）；
});
控制台日志（幻灯片[n-1]）；
幻灯片[n-1]。显示（）；
}
});

jQuery库在自定义脚本之前添加

错误文本

---

在

放映幻灯片

功能中， 检查

n

的值是否在正确的范围内。 如果太低或太高， 将

slideIndex

设置为开头或结尾， 适当地。 但问题是在这些检查之后， 而不是使用

slideIndex

， 您使用的是

n

，这是不变的。 所以如果

n

太高，

幻灯片[n]

将引用未定义的

文件，
你会得到一个错误

修复方法很简单：在检查后使用
slideIndex
，而不是
n
。
该变量的值在正确范围内得到验证

当
n
在范围内时，还需要设置
slideIndex
。
第二个
if
条件应更改为
else if

if (slides.length < n) {
    slideIndex = 1;
} else if (n < 1) {
    slideIndex = slides.length;
} else {
    slideIndex = n;
}
$.each(slides, function () {
    $(this).hide();
});
console.log(slides[slideIndex - 1]);
slides[slideIndex - 1].show();

if（slides.length
我认为如果您缩小问题范围并减少复制/粘贴代码的数量，您的机会会增加。请同时添加错误文本，而不是强制用户单击指向外部站点的链接。
if (slides.length < n) {
    slideIndex = 1;
} else if (n < 1) {
    slideIndex = slides.length;
} else {
    slideIndex = n;
}
$.each(slides, function () {
    $(this).hide();
});
console.log(slides[slideIndex - 1]);
slides[slideIndex - 1].show();