CODEWITHSUNDEEP
jquery
Peeper
Peeper

Reputation: 382

Why do I need to use a variable in this instance instead of typing out the variables value?

I'm doing the interactive website course on codeacademy.com. The goal is to make an arrow button fade out the active slide then fade in the next slide. Why does the code below work if I use variables:

$('.arrow-next').click(function(){
    var currentSlide = $('.active-slide');
    var nextSlide = currentSlide.next();
    currentSlide.fadeOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');
});

But typing out the variable values doesnt:

$('.arrow-next').click(function(){
     $('.active-slide').fadeOut(600).removeClass('active-slide');
     $('.active-slide').next().fadeIn(600).addClass('active-slide');
});

Appreciate any help. Thanks.

Upvotes: 1

Views: 32

Answers (1)

Hannes
Hannes

Reputation: 8237

Because $('.active-slide').fadeOut(600).removeClass('active-slide'); removes the class .active-slide so the selector doesn't match anything anymore.

While in the first example the object is stored beforehand so it can still be used.

Upvotes: 2

Related Questions