Рефакторинг jQuery С селектором и индексом

Question

Просто для того, чтобы заставить его работать, у меня есть страница часто задаваемых вопросов с jQuery, которая скрывает все разделы, разделенные .faqSection, а также уникальный идентификатор - #faqSection1, #faqSection2 и т. Д. Затем я просматриваю плагин Waypoint, который определяет, когда смещение данного div составляет 80% окна просмотра.

Перед рефакторинга, код выглядит следующим образом:

jQuery('.faqSection').css('opacity', 0); 
jQuery('#faqSection2').waypoint(function() { 
    jQuery('#faqSection2').delay(800).queue('fx', function() { jQuery(this).addClass('animated fadeInDown'); }); 
}, { offset: '80%' }); 

jQuery('#faqSection3').waypoint(function() { 
    jQuery('#faqSection3').delay(800).queue('fx', function() { jQuery(this).addClass('animated fadeInDown'); }); 
}, { offset: '80%' }); 

jQuery('#faqSection4').waypoint(function() { 
    jQuery('#faqSection4').delay(800).queue('fx', function() { jQuery(this).addClass('animated fadeInDown'); }); 
}, { offset: '80%' }); 

jQuery('#faqSection5').waypoint(function() { 
    jQuery('#faqSection5').delay(800).queue('fx', function() { jQuery(this).addClass('animated fadeInDown'); }); 
}, { offset: '80%' }); 

jQuery('#faqSection6').waypoint(function() { 
    jQuery('#faqSection6').delay(800).queue('fx', function() { jQuery(this).addClass('animated fadeInDown'); }); 
}, { offset: '80%' }); 

Как вы можете видеть, это просто число на конце, который изменяется. Я хотел реорганизовать именно по этой причине, плюс хочу разместить другое количество div.

Так что я попытался это:

jQuery('.faqSection').css('opacity', 0); 
for(var index = 0; 
    index < $('.faqSection').length; index++) { 
    jQuery('#faqSection' + index).waypoint(function() { 
     jQuery('#faqSection' + index).delay(800).queue('fx', function() { jQuery(this).addClass('animated fadeInDown'); }); 
    }, { offset: '80%' }); 
} 

Разве это не возможно сделать селектор плюс индекс, или у меня что-то другое неправильное в моем синтаксисе и/или думать?

Answer 1

Просто догадаться, но я думаю, проблема может заключаться в том, что вы не смогли правильно захватить переменную index. (Другими словами, код внутри функции всегда видит последнее значение index вместо того, которое было в тот момент, когда вы его настроили.)

Попробуйте вместо этого вместо этого (также факторинг @ Никогда не указывайте, что ваш индекс, вероятно, начинается и заканчивается на неправильный номер):

jQuery('.faqSection').css('opacity', 0); 
for(var index = 2; 
    index <= $('.faqSection').length; index++) { 
    (function (index) { jQuery('#faqSection' + index).waypoint(function() { 
     jQuery('#faqSection' + index).delay(800).queue('fx', function() { jQuery(this).addClass('animated fadeInDown'); }); 
    }, { offset: '80%' }); })(index); 
} 

EDIT

Еще лучше:

jQuery('.faqSection').css('opacity', 0); 

// slice(1) skips the first element 
jQuery('.faqSection').slice(1).each(function() { 
    jQuery(this).waypoint(function() { 
     jQuery(this).delay(800).queue('fx', function() { 
      jQuery(this).addClass('animated fadeInDown'); 
     }); 
    }); 
}); 

Или, если предположить Точку работает следующим образом (я думаю, что большинство плагинов JQuery сделать):

jQuery('.faqSection').css('opacity', 0); 

// slice(1) skips the first element 
jQuery('.faqSection').slice(1).waypoint(function() { 
    jQuery(this).delay(800).queue('fx', function() { 
     jQuery(this).addClass('animated fadeInDown'); 
    }); 
}); 

Answer 2

Ваш индекс начинается с 0, и я полагаю, #faqSection0 не существует

код должен выглядеть следующим образом

for(var index = 0; index < $('.faqSection').length; index++) { 
    var faq = '#faqSection' + (index + 2); // assuming #faqSection starts from 2 
    jQuery(faq).waypoint(function() { 
     jQuery(faq).delay(800).queue('fx', function() { jQuery(this).addClass('animated fadeInDown'); }); 
    }, { offset: '80%' }); 
}