'Uncaught TypeError: vairable.fadeOut не является функцией' в цикле for

Question

Я пытаюсь установить имя класса для переменной, а затем fadeOut(). Я могу использовать fadeOut () непосредственно в селекторе запросов, но не тогда, когда храню его в переменной.

Вот мой код:

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];
  }
});

Вот видео без звука, показывающее, что случилось: http://screencast-o-matic.com/watch/cbj3rvl8YF

Я что-то пропустил?

Вот ссылка на мой CodePen для остальной части кода: https://codepen.io/naturalhanglider/collab/bd90327af7cb6da2620e3a3c4d7f398f/?editors=1010

Я покопался и не смог найти то, что искал. Пожалуйста, укажите мне правильное направление, если этот вопрос уже задавался!

Answer 1

Делай как это. сначала добавьте уникальный идентификатор в ваш HTML, как это

<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> 

и ваш код JavaScript в цикле Foor получить их, как это

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

Я не знаю, что вы пытаетесь исчезнуть, потому что я не вижу HTML-код в codepen, но ваша ошибка не повторится при этом.

ИЛИ вы также можете сделать это

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

});