Javascript 动态jQuery航路点循环

我正在努力研究循环的语法，该循环通过并动态设置jQuery路径点

目前我有这个代码-

HTML标记

对于每个“进程锚”，我想创建一个jQuery航路点

<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>

我想运行并创建航路点，但锚点DIV的数量可能会发生变化。我如何编辑上面的代码，使之成为动态的，这样我就不必每次都是特定的

谢谢

---

DIM3NSION

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

加成 我已经将class=trigger-anchor添加到你的锚定div中，希望找到一种更接近这些div的方法。在流程映像上放置一个公共类-*而不是让它们都是唯一的

<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>

---

看看这是否有助于你找到正确的方向。

根据Waypoints网站，你可以完成如下相同的事情：Waypoints将循环并用每个实例填充你的数组。我在我的网站上使用了这种方法

//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");
});

---

你能在你的问题中加入更多的代码吗？你的加价？另外，我没有看到您在代码中运行的实际循环，只设置了两个变量和waypoint init，但正如所写的，它只运行一次。嗨，Lionel，我编辑了我的答案，希望能减轻任何困惑谢谢Lionel，我稍微编辑了我的HTML结构，因此进程图像不幸地不是以较低的div元素出现，而是以完全不同的div显示。我是否必须使用.find来代替？最好将其保留为子元素，以便它可以更直接地与锚元素相关联。如果您确实必须提取该进程映像div，尽管您可以根据需要使用.next'.process image'或prev'.process image'。

<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>

//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");
});