JQuery waypoints using multiple classes

问题

I'm using http://imakewebthings.com/jquery-waypoints and having 5 classes (staffmember), at the moment waypoints fires on all the classes at once when getting the first class. How to stage it so that I can add as you pass through the list?

<ul id="staff">
<li class="staffmember"></li>
    <li class="staffmember"></li>
    <li class="staffmember"></li>
    <li class="staffmember"></li>
    <li class="staffmember"></li>
</ul>

jQuery

$('.staffmember').waypoint(function(direction) {
jQuery('.staffmember').addClass('on').next();
});

Thanks

回答1:

If I understand you correctly try this. It should iterate through each .waypoint element and add individual waypoints to each one that add the .on class as you scroll past them.

$('.staffmember').each(function() {
  $(this).waypoint(function() {
    $(this).addClass('on');
  });
});

回答2:

I think your problem was that you were adding the "on" class to ALL matching elements (jQuery('.staffmember')), instead of just to the triggering element. Waypoints already does the iteration for you, as imakewebthings points out.

So, your original jQuery should be:

$('.staffmember').waypoint(function(direction) {
  jQuery(this).addClass('on').next();
});

That should do the trick without the each.

来源：https://stackoverflow.com/questions/24060069/jquery-waypoints-using-multiple-classes