[英]Dynamic jQuery Waypoints Loop
我正在努力处理循环并动态设置jQuery Waypoint的语法。
目前,我有此代码-
HTML标记
我想为每个“过程锚点”创建一个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代码(当前)
var process_fixed_anchor_1 = $('.process-anchor-1').waypoint({
handler: function(direction) {
$(".process-image-1").toggleClass("fade-in");
}
});
我想遍历并创建航点,但是锚点DIV的数量可能会改变。 我如何才能将上面的代码编辑为动态的,因此不必每次都具体?
谢谢,
DIM3NSION
仍然不清楚您要完成的工作,但是这是在给定锚点div数目未知的情况下,我如何动态地将航点分配给页面的方法:
我在您的锚点div中添加了class="trigger-anchor"
,希望找到一种针对这些div的更平易近人的方法。 还要在您的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>
我将在要通过航点构建class="trigger-anchor"
的元素上运行.each()
。 这样,我不必声明var loops = 5;
或类似的东西。
<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>
看看这是否有助于您朝正确的方向发展。
根据Waypoint网站http://imakewebthings.com/waypoints/guides/jquery-zepto/的说明 ,您可以完成以下操作(waypoint将循环并用每个实例填充数组)。 我在网站上使用了这种方法。
//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.