Question

请帮我解决这个错误。不能在最后几个小时解决这个问题。似乎在函数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>

style.scss

.slider-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  .slide-item {
    display: none;
  }
 ...
}

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();
    }

});

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

错误文字 https://i.stack.imgur.com/t3aLx.png

Answer 1

在showSlide函数中，检查n的值是否在正确的范围内。如果它太低或太高，你将slideIndex设置为开头或结尾，适当。但问题是经过这些检查后，而不是使用slideIndex，你使用n，它没有变化。所以如果n太高， slides[n]将引用undefined文件，而你得到一个错误。

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

当slideIndex在范围内时，您还需要设置n。第二个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();

未捕获的TypeError：slides [n] .show不是函数

1 个答案: