javascript - fadeOut(...)。removeClass不是函数

在构建带有图像的滑块时遇到一个小问题。我是javascript和jquery的初学者，所以我根据前一段时间在codeacademy上所做的工作构建了id（以前在那儿工作得很好，但即使在那儿也不再起作用）。当我单击下一个箭头时，它工作正常，但是当我单击上一个箭头时，它不再起作用。它在控制台中说“未捕获的TypeError：currentSlide.fadeOut（...）。removeCLass不是函数”。

这是我的代码：

HTML：

<div class="slider">
    <div class="slide slide1 active-slide">
    </div>
    <div class="slide slide2">
    </div>
    <div class="slide slide3">
    </div>
    <div class="slide slide4">
    </div>
</div>

<div class="slider-nav">
    <a href="#" class="arrow-prev"><img src="images/props/arrow-prev.png"></a>
    <ul class="slider-dots">
        <li class="dot active-dot">&bull;</li>
        <li class="dot">&bull;</li>
        <li class="dot">&bull;</li>
        <li class="dot">&bull;</li>
    </ul>
    <a href="#" class="arrow-next"><img src="images/props/arrow-next.png"></a>
</div>

CSS：

.slider{
    position:relative;
    width:100%;
    height:550px;
}
.slide{
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
}
.slide1{
    background-image:url('images/main/slider/1.jpg');
    height:100%
}
.slide2{
    background-image:url('images/main/slider/2.jpg');
    height:100%
}
.slide3{
    background-image:url('images/main/slider/3.jpg');
    height:100%
}
.slide4{
    background-image:url('images/main/slider/4.jpg');
    height:100%
}
.active-slide{
    display:block;
}

最后JAVASCRIPT：

var main = function(){

    $('.arrow-next').click(function(){
       var currentSlide = $('.active-slide');
       var nextSlide = currentSlide.next();

       if (nextSlide.length == 0){
        nextSlide = $('.slide').first();
       }

       currentSlide.fadeOut(600).removeClass('active-slide');
       nextSlide.fadeIn(600).addClass('active-slide');

       currentDot = $('.active-dot');
       nextDot = currentDot.next();

       if (nextDot.length == 0){
        nextDot = $('.dot').first();
       }

       currentDot.removeClass('active-dot');
       nextDot.addClass('active-dot');
    });

    $('.arrow-prev').click(function(){
       var currentSlide = $('.active-slide');
       var prevSlide = currentSlide.prev();

       if (prevSlide.length == 0){
        prevSlide = $('.slide').last();
       }

       currentSlide.fadeOut(600).removeCLass('active-slide');
       prevSlide.fadeIn(600).addClass('active-slide');

       currentDot = $('.active-dot');
       prevDot = currentDot.prev();

       if (prevDot.lenth == 0){
        prevDot = $('.dot').last();
       }

       currentDot.removeClass('active-dot');
       prevDot.addClass('active-dot');
    });
};

$(document).ready(main);

最佳答案

我首先看到的是您叫removeCLass。大写字母“ L”

也许这是你的错。

也许是错误的jquery版本。

当我只是尝试

$("body").fadeOut(600).addClass("hello")

它正常工作

关于javascript - fadeOut(...)。removeClass不是函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35527371/