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