Is it a bug? is it my weak debugging?


#1

I keep getting the error message from 11/12 on interactive website flipboard "Oops, try again. Remember to remove '.active-dot' from the current dot."

var main = function() {
$('.dropdown-toggle').click(function(){
$('.dropdown-menu').toggle();

});

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

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

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

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

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

});

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

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

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

if(prevSlide.length === 0) {
   prevSlide = $('.slide').last();
   prevDot = $('.dot').last();
}
    
currentDot.removeClass('.active-dot');
prevDot.addClass('.active-dot');
});

}

$(document).ready(main);


#2

The addClass() and removeClass() methods take a class name, not a class selector:

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

should be,

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

#3

this confused me too at first. Basically you are just giving a name of the class in the brackets, while addClass or removeClass is what gives it class functionality, or if you want, addClass or removeClass are giving it a dot. Using code addClass(".example"); is like putting in your CSS:

..example {
/*--something--*/
}

(which probably wouldn't even work)


#4

Thanks for the help!


#5

really Helps thank you so much