'Uncaught TypeError: vairable.fadeOut n'est pas une fonction' in for loop

Question

J'essaie de définir un nom de classe à une variable, puis fadeOut(). Je suis capable d'utiliser fadeOut() directement sur le sélecteur de requête, mais pas quand je le stocke dans une variable.

Voici mon code:

var sections = ["$('.start')", "$('.one')", "$('.two')", "$('.three')", "$('.four')", "$('.five')", "$('.six')","$('.seven')","$('.eight')"]; 
var begin = $('.begin'); 

var i = 0; 
var currentSection = sections[i]; 
var nextSection; 

begin.on('click', function(){ 
    for(i=0; i < sections.length; i++){ 
    console.log(currentSection); 
    currentSection.fadeOut(); 
    currentSection = sections[i+1]; 
    } 
}); 

Voici une vidéo sans son montrant ce qui se passe: http://screencast-o-matic.com/watch/cbj3rvl8YF

Suis-je manque quelque chose?

Voici le lien vers mon CodePen pour le reste du code: https://codepen.io/naturalhanglider/collab/bd90327af7cb6da2620e3a3c4d7f398f/?editors=1010

Je fouilla, et n'a pas été en mesure de trouver ce que je cherchais. S'il vous plaît pointez-moi dans la bonne direction si cette question a déjà été posée!

Answer 1

Faites comme ceci. d'abord ajouter identifiant unique à votre html comme celui-ci

<section class="start"> 
    <p><div class="begin button">Begin</div></p> 
</section> 
<section id="section-1" class="one hidden"> 
<div class="bg"> 
<p class="overlay">Section One</p> 
</div> 
</section> 
<section id="section-2" class="two hidden"> 
<p>Section Two</p> 
</section> 
<section id="section-2" class="three hidden"> 
<p>Section Three</p> 
</section> 
<section id="section-4" class="four hidden"> 
<p>Section Four</p> 
</section> 
<section id="section-5" class="five hidden"> 
    <p>Section Five</p> 
</section> 
<section id="section-6" class="six hidden"> 
    <p>Section Six</p> 
</section> 
<section id="section-7" class="seven hidden"> 
<p>Section Seven</p> 
</section> 
<section id="section-8" class="eight hidden"> 
<p>Section Eight</p> 
</section> 

et votre code javascript dans la boucle de Foor les récupérer comme celui-ci

var sections = [$('.start'), $('.one'), $('.two'), $('.three'), $('.four'), $('.five'), $('.six'),$('.seven'),$('.eight')]; 
var begin = $('.begin'); 

var i = 0; 

begin.on('click', function(){ 
    for(i=0; i < sections.length; i++){ 
    console.log(currentSection); 
    var currentSection = $("#section-"+i); 
    currentSection.fadeOut(); 
    } 
}); 

je ne sais pas ce que vous tryinng à disparaître parce que je ne peux pas voir tout html codepen mais votre erreur ne se reproduira pas en faisant cela.

OU vous pouvez aussi faire comme ce

begin.on('click', function(){ 
    sections.forEach(function(element) { 
    console.log(element); 
    element.fadeOut(); 
    console.log(element); 

});