Refactoring jQuery Mit einem Selector und Index

Question

nur um daran zu arbeiten, ich habe eine FAQ-Seite mit jQuery, die alle divs mit .faqSection sowie eine eindeutige ID eingestuft versteckt - #faqSection1, #faqSection2 usw.. Ich gehe dann mit dem Wegpunkt-Plugin durch, das erkennt, wenn der Offset eines gegebenen Div bei 80% des Viewports liegt.

Vor Refactoring sieht der Code wie folgt aus:

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%' }); 

Wie Sie sehen, es ist nur die Zahl am Ende ändert sich. Ich wollte aus genau diesem Grund umgestalten und möchte eine andere Anzahl von Divs unterbringen.

So habe ich versucht, dies:

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%' }); 
} 

Ist es nicht möglich, einen Selektor Plus Index zu tun, oder muss ich etwas anderes falsch in meiner Syntax und/oder zu denken?

Answer 1

Nur eine Vermutung, aber ich denke, das Problem kann sein, dass Sie die index Variable nicht korrekt erfassen können. (Mit anderen Worten, der Code in der Funktion sieht immer den letzten Wert von index statt der zum Zeitpunkt der Einrichtung.)

Versuchen Sie es stattdessen (auch in @ Neverever Punkt, dass Ihr Index wahrscheinlich beginnt und endet an der falschen Nummer):

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

Noch besser:

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

Oder Wegpunkt unter der Annahme arbeitet auf diese Weise (ich glaube, die meisten jQuery Plugins tun):

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

Ihr Index von 0 beginnt, und ich nehme an #faqSection0 nicht

der Code sollte wie diese

aussehen existiert

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%' }); 
}