gpt4 book ai didi

javascript - 使用选择器和索引重构 jQuery

转载 作者:行者123 更新时间:2023-11-30 09:47:45 26 4
gpt4 key购买 nike

<分区>

为了让它正常工作,我有一个带有 jQ​​uery 的常见问题解答页面,它隐藏了所有分类为 .faqSection 的 div,以及一个唯一的 id -- #faqSection1#faqSection2 等。然后,我使用 Waypoint 插件来检测给定 div 的偏移量何时达到视口(viewport)的 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%' });
}

选择器加索引是不可能的,还是我的语法和/或想法有其他不正确的地方?

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com