My if statement seems to not work. Or am I missing something?


#1



var main = function() {
    $('.dropdown-toggle').click(function () {
        $('.dropdown-menu').toggle();
        });
        
         $('.arrow-next').click(function () {
            var currentSlide = $('.active-slide');
            var nextSlide = $('.active-slide').next();
            
             if(nextSlide.length == 0) {
                 nextSlide = $('.slide').first();
                 nextDot = $('.dot').first();
                 }
            
            currentSlide.fadeOut(600).removeClass('active-slide');
            nextSlide.fadeIn(600).addClass('active-slide');
            
            var currentDot = $('.active-dot').removeClass('active-dot');
            
            var nextDot = currentDot.next().addClass('active-dot');
            });
    };
    
$(document).ready(main);


#2

Hi @djuarez94,

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

Use the variables you created on lines 7 and 8 there instead, rather than trying to create them again. Those two lines ↑ should look like this instead:

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

#3

I'm sorry but I do not seem to understand what you are explaining? I already have

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

in my code. I even looked at the hint that was given and it specifically said to have your if statement like this

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

which is what I have on my code.


#4

Never mind I understood what you were saying. Thanks I got it!


#5

So I did what I believe you had mentioned which is the code that follows...

var main = function() {
    $('.dropdown-toggle').click(function () {
        $('.dropdown-menu').toggle();
        });
        
         $('.arrow-next').click(function () {
            var currentSlide = $('.active-slide');
            var nextSlide = $('.active-slide').next();
            
             if(nextSlide.length == 0) {
                 nextSlide = $('.slide').first();
                 nextDot = $('.dot').first();
                 }
            
            currentSlide.fadeOut(600).removeClass('active-slide');
            nextSlide.fadeIn(600).addClass('active-slide');
            
            var currentDot = $('.active-dot');
            
            var nextDot = currentDot.next();
            
            currentDot.removeClass('active-dot');
            nextDot.addClass('active-dot');
            });
    };
    
$(document).ready(main);

but it still tells me "Oops, try again. When on the last slide, it looks like next arrow isn't wrapping back to the first dot. Look back at the instructions and check the code inside the if statement."


#6

I found the solution. The problem seemed to have been with the placing of the lines of code. Once I declared my variables first, the rest of the code was able to work just fine.

Here is my final code

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();
                 }
            
            currentSlide.fadeOut(600).removeClass('active-slide');
            nextSlide.fadeIn(600).addClass('active-slide');
            
            
            
             if(nextDot.length == 0) {
                 nextDot = $('.dot').first();
                 }
            
            currentDot.removeClass('active-dot');
            nextDot.addClass('active-dot');
            });
    };
    
$(document).ready(main);

#7

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