Next dot 2, code doesn't work


#1

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

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

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

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



});

};

$(document).ready(main);

For some reason the code inside the if statement doesn't seem to get run. However this only counts for the nextDot variable. It doesn't get updated like it should. I've actually typed it like it is in the hint.

If anyone knows what I can do to fix it or what's wrong with the code please let me know.

Edit: I've also checked all the (){}s with Sublime Text 3, they all match up yet it still doesn't work.


#2

@df2912,
You will have to manipulate

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

AFTER the IF-statement

=================================================

+++++ flipboard the next && prev steps
You will have to keep a strict order in your code.....

s t e p s - - f o r - - n e x t S l i d e
-1
-1a create a selection of nextSlide (2 steps, capture 'active-slide, capture next() slide )'
-1b create a selection of nextDot
-2 check if selection of nextSlide is EMPTY
-2a if EMPTY change nextSlide selection to first slide
-2b and change nextDot selection to first Dot
-3 swap -active-slide- and -active-dot- class from current to next
Step3 is done by

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

s t e p s - - f o r - - p r e v S l i d e
-1
-1a create a selection of prevSlide
-1b create a selection of prevDot
-2 check if selection of prevSlide is EMPTY
-2a if EMPTY change prevSlide selection to last slide
-2b and change prevDot selection to last Dot
-3 swap -active-slide- and -active-dot- class from current to prev
Step3 is done by

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

+++++++++++++++++++++++++++++++++++++
++ jquery length explained AND DOM pictures of flipboard
https://www.codecademy.com/forum_questions/5615308ab62548021c0000e4


#3

Thank you, it worked!


#4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.