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'); 

      } 

     }); 

    }); 

}); 

我没有收到任何电子邮件rrors。然而没有发生。

Answer 1

$（本）内$（本）.waypoints（{..指航点对象，而不是元件H2

尝试这种情况：

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

    var self = $(this); 

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

Answer 2

您错过了$ .each函数的两个重要参数。对于jQuery选择，使用element而不是this。

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