[英]Dynamic jQuery Waypoints Loop
I'm struggling with the syntax for a loop that goes through and dynamically sets jQuery Waypoints. 我正在努力处理循环并动态设置jQuery Waypoint的语法。
Currently I have this code - 目前,我有此代码-
HTML Markup HTML标记
For each 'process-anchor' I want to create a jQuery Waypoint 我想为每个“过程锚点”创建一个jQuery Waypoint
<div class="container">
<div class="process-anchor-1"></div>
<div class="process-anchor-2"></div>
<div class="process-anchor-3"></div>
<div class="process-anchor-4"></div>
<div class="process-anchor-5"></div>
</div>
<div class="image-list">
<div class="process-image"><img src="test.jpg"/></div>
<div class="process-image"><img src="test.jpg"/></div>
<div class="process-image"><img src="test.jpg"/></div>
<div class="process-image"><img src="test.jpg"/></div>
<div class="process-image"><img src="test.jpg"/></div>
</div>
Javascript Code (currently) Javascript代码(当前)
var process_fixed_anchor_1 = $('.process-anchor-1').waypoint({
handler: function(direction) {
$(".process-image-1").toggleClass("fade-in");
}
});
I want to run through and create waypoints however the amount of anchor DIV's may change. 我想遍历并创建航点,但是锚点DIV的数量可能会改变。 How could I edit the above code to be dynamic so I don't have to be specific every time? 我如何才能将上面的代码编辑为动态的,因此不必每次都具体?
Thanks, 谢谢,
DIM3NSION DIM3NSION
Still just a bit unclear on what you're trying to accomplish, but here's how I would dynamically assign waypoints to a page given an unknown number of anchor divs: 仍然不清楚您要完成的工作,但是这是在给定锚点div数目未知的情况下,我如何动态地将航点分配给页面的方法:
I have added class="trigger-anchor"
to your anchor divs with the hopes of finding a more approachable way to target those divs. 我在您的锚点div中添加了class="trigger-anchor"
,希望找到一种针对这些div的更平易近人的方法。 Also put a common class on your process-image-*
rather than letting them all be unique. 还要在您的process-image-*
上放置一个通用类process-image-*
而不是让它们都唯一。
<div class="container">
<div class="process-anchor-1" class="trigger-anchor">
<div class="process-image"><img src="test.jpg"/></div>
</div>
<div class="process-anchor-2" class="trigger-anchor">
<div class="process-image"><img src="test.jpg"/></div>
</div>
<div class="process-anchor-3" class="trigger-anchor">
<div class="process-image"><img src="test.jpg"/></div>
</div>
<div class="process-anchor-4" class="trigger-anchor">
<div class="process-image"><img src="test.jpg"/></div>
</div>
<div class="process-anchor-5" class="trigger-anchor">
<div class="process-image"><img src="test.jpg"/></div>
</div>
</div>
I'll run an .each()
on the elements where class="trigger-anchor"
to build by waypoints. 我将在要通过航点构建class="trigger-anchor"
的元素上运行.each()
。 This way I don't have to declare var loops = 5;
这样,我不必声明var loops = 5;
or anything like that. 或类似的东西。
<script type="text/javascript">
// Wait until our DOM is ready
$( document ).ready( function() {
// Keep Track of how many we make and store
// our instances in an array to access if
// we need to later
var anchors = array();
$( '.trigger-anchor' ).each( function() {
var tmp_instance = $( this ).waypoint({
handler: function(direction) {
$( this ).children('process-image').toggleClass("fade-in");
}
});
anchors.push( tmp_instance );
} );
} );
</script>
See if that helps to get you in the right direction. 看看这是否有助于您朝正确的方向发展。
According to Waypoints website http://imakewebthings.com/waypoints/guides/jquery-zepto/ , you can accomplish the same thing as follows (waypoints will loop and fill your array with each instance). 根据Waypoint网站http://imakewebthings.com/waypoints/guides/jquery-zepto/的说明 ,您可以完成以下操作(waypoint将循环并用每个实例填充数组)。 I used this method on my site. 我在网站上使用了这种方法。
//within your document.ready function
var anchors = array();
anchors = $( '.trigger-anchor' ).waypoint({
handler: function(direction) {
$(this).children('process-image').toggleClass("fade-in");
}
});
//ALTERNATE METHOD
//you can also include your handler in the waypoint call
anchors = $( '.trigger-anchor' ).waypoint(function(){
$(this).children('process-image').toggleClass("fade-in");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.