動態jQuery Waypoints循環

Question

我正在努力處理循環並動態設置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

Answer 1

仍然不清楚您要完成的工作，但是這是在給定錨點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>

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>

看看這是否有助於您朝正確的方向發展。

Answer 2

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