jQuery Waypoint中的每個循環

Question

我在Waypoints中無法使用$ .each（）。 我看過其他一些使用相同方法的stackoverflow帖子。 所以我可能會缺少一些東西。 請幫忙！

我在JSFiddle上有它： https ://jsfiddle.net/rs80dmn5/5/

這是html：

<ul class="col-sm-6">
                <li>
                    <h2>10<span>year</span></h2>
                    <h2>100,000<span>miles</span></h2>
                    <p>Powertrain<br/>Warranty</p>
                </li>
                <li>
                    <h2>5<span>year</span></h2>
                    <h2>60,000<span>miles</span></h2>
                    <p>Limited Warranty</p>
                </li>
                <li>
                    <h2>5<span>year/unlimited miles</span></h2>
                    <h2>24<span>hour</span></h2>
                    <p>Roadside Assistance</p>
                </li>
                <li>
                    <p>You have certain expectations when looking for a new car and one of the most important is that it will last, which is why we back every Hyundai with “America’s Best Warranty.” It’s our way of showing how much confidence we have in the quality of the vehicles we make so you’ll have the confidence of knowing that the joy of ownership is one that will last for today, tomorrow and years down the road.</p>
                    <a href="#">Learn more about our Warranty</a>
                    <p><small>*America’s Best Warranty claim based on total package of warranty programs. See dealer for LIMITED WARRANTY details.</small></p>
                </li>
            </ul>

這是我的CSS：

    ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  height: 500px;
  width: 100%;
  display: block;
}

li h2 {
  font-size: 110px;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        margin-top: 20px;
    }
    100% {
        opacity: 1;
        margin-top: 0px;
    }
}

h2.fadeup {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-direction: normal;
}
li h2 span {
  font-size: 20px;
}

這是我的JS：

$(document).ready(function(){

    $('h2').each( function(){

        $(this).waypoint({

            handler: function(){

                $(this).addClass('fadeup');

            }

        });

    });

});

我沒有任何錯誤。 但是什么也沒發生。

Answer 1

$（this）.waypoints中的$（this）（{。指代路點對象，而不是元素h2

嘗試這個：

$('h2').each(function(){

    var self = $(this);

    $(this).waypoint({
         handler: function(){
             self.addClass('fadeup');
         }
    });
})

Answer 2

您缺少$ .each函數的兩個重要參數。 對於jQuery-selections，請使用element代替this 。

$(document).ready(function(){
    $('h2').each( function(index, element){
        $(element).waypoint({
            handler: function(){
                $(element).addClass('fadeup');
            }
        });
    });
});