动态jQuery Waypoints循环

Dynamic jQuery Waypoints Loop

本文关键字：循环 Waypoints jQuery 动态      更新时间：2023-09-26

我正在为一个循环的语法而挣扎，该循环通过并动态设置jQuery Waypoints。

目前我有这个代码-

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的数量可能会改变。我怎么能把上面的代码编辑成动态的，这样我就不必每次都很具体了？

谢谢，

DIM3SION

对于您想要实现的目标仍然有点不清楚，但以下是我如何在给定未知数量的锚点div的情况下为页面动态分配路点：

标记

我已经将class="trigger-anchor"添加到您的锚定div中，希望找到一种更容易接近的方法来针对这些div。还要在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>

JavaScript

我将在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>

看看这是否有助于你朝着正确的方向前进。

根据Waypoints网站http://imakewebthings.com/waypoints/guides/jquery-zepto/，您可以完成以下相同的操作（路点将循环并用每个实例填充数组）。我在我的网站上使用了这种方法。

//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");
});
相关文章：