jQueryウェイポイントの各ループ

Question

ウェイポイントで$ .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'); 

      } 

     }); 

    }); 

}); 

私はeを取得していませんrrors。しかし何も起こっていない。

Answer 1

$（この）（{..代わり素子H2のウェイポイント・オブジェクトを指す

これを試してください：内部

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

    var self = $(this); 

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

Answer 2

$ .each関数の2つの重要な引数がありません。 jQueryの選択にはthisの代わりにelementを使用してください。 $（この）.waypoints内部

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