Javascript 使用选择器和索引重构jQuery

为了让它正常工作，我有一个带有jQuery的FAQ页面，它隐藏了所有按

.faqSection

分类的div，还有一个唯一的id--

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

jQuery（'.faqSection'）.css（'opacity'，0）；
对于（var指数=0；
索引<$（'.faqSection'）。长度；索引++）{
jQuery（“#faqSection”+索引）。航路点（函数（）{
jQuery（'#faqSection'+index）.delay（800）.queue（'fx'，function（）{jQuery（this.addClass（'animated fadeInDown'）；}）；
}，{偏移量：80%}）；
}

---

是否不可能执行选择器加索引，或者我的语法和/或思维中是否存在其他错误？

只是猜测，但我认为问题可能是您未能正确捕获

索引变量。（换句话说，函数中的代码总是看到
索引的最新值，而不是设置时的值。）

尝试一下（同时考虑@Neverever的点，即您的索引可能以错误的数字开始和结束）：

或者，假设waypoint是这样工作的（我认为大多数jQuery插件都是这样做的）：

只是一个猜测，但我认为问题可能是您未能正确捕获
索引
变量。（换句话说，函数中的代码总是看到
索引的最新值，而不是设置时的值。）

尝试一下（同时考虑@Neverever的点，即您的索引可能以错误的数字开始和结束）：

或者，假设waypoint是这样工作的（我认为大多数jQuery插件都是这样做的）：

您的索引从
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%' });
}

for（var index=0；index<$（'.faqSection'）。长度；索引++）{
var faq='#faqSection'+（index+2）；//假设#faqSection从2开始
jQuery（faq）.航路点（函数（）{
jQuery（faq）.delay（800）.queue（'fx'，function（）{jQuery（this）.addClass（'animated fadeInDown'）；}）；
}，{偏移量：80%}）；
}
您的索引从
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%' });
}

for（var index=0；index<$（'.faqSection'）。长度；索引++）{
var faq='#faqSection'+（index+2）；//假设#faqSection从2开始
jQuery（faq）.航路点（函数（）{
jQuery（faq）.delay（800）.queue（'fx'，function（）{jQuery（this）.addClass（'animated fadeInDown'）；}）；
}，{偏移量：80%}）；
}
请注意，您的第二个代码段假定#faqSection1到6是.faqSection的唯一子元素。@Aaron是的，这是正确的。@Aaron或者更确切地说，它假定
#faqSection1到
6
是页面上唯一具有类
faqSection
的元素。啊，对了，我的错误。请注意，您的第二个代码片段假定#faqSection1到6是.faqSection的唯一子元素。@Aaron是的，这是正确的。@Aaron或者更确切地说，它假定
#faqSection1
到
6
是页面上唯一具有类
faqSection
的元素。啊，对，我的错误。这不是什么大问题，但是在您的航路点回调中，为什么不使用
this.element
，而不是再次选择#faqSection1或任何一个？您甚至可以使用一个公共处理程序，从：jQuery（this.element）.delay（800）.queue（'fx'，function（）{这不是一个大问题，但是在您的航路点回调中，为什么不使用
this.element
，而不是再次选择#faqSection1或任何一个？您甚至可以使用一个公共处理程序，从：jQuery（this.element）.delay（800）开始.queue（'fx'，function（）{
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');
    });
});

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