javascript - 动态 jQuery Waypoints 循环

Question

我正在为一个遍历并动态设置 jQuery Waypoints 的循环语法苦苦挣扎。

目前我有这段代码-

HTML 标记

我想为每个“process-anchor”创建一个 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");
      }
});

我想遍历并创建航路点，但 anchor DIV 的数量可能会发生变化。我怎样才能将上述代码编辑为动态的，这样我就不必每次都具体化？

谢谢，

维度3NSION

Answer 1

仍然不太清楚您要完成的任务，但这是我如何在给定未知数量的 anchor div 的情况下动态地将路径点分配给页面:

标记

我已将 class="trigger-anchor" 添加到您的 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>

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