使用航点切换班级

Question

 var $foo = $("#foo");

 $foo.waypoint(function(){
    $(this).addClass("blue").removeClass("red");  
     $.notify(this.id + 'hit');
 },{offset:'25%'});

 $foo.waypoint(function(){
     $(this).addClass("red").removeClass("blue");      
 },{offset:'24%'});

 $foo.waypoint(function(){
     $(this).addClass("blue").removeClass("red");       
 },{offset:'74%'});

 $foo.waypoint(function(){
     $(this).addClass("red").removeClass("blue");      
 },{offset:'75%'});


 <div id="foo" class="blue">
  First Panel
 </div>

首先，有问题的课程无法切换。此外，$.notify(this.id)为我返回undefined？

$.notify(this.element.id)已定义。

这是否与航点API中链接方法的性质有关？如果是这样，我该如何克服它？

解决方案：

$('#foo').waypoint(  
 function(direction) {
        $('#foo').toggleClass('fadeInLeft');
}, { offset: '50%'}); // toggle at 50% from top viewport
$('#foo').waypoint(  
 function(direction) {
        $('#foo').toggleClass('fadeInLeft');
}, { offset: '-400'}); // toggle again a further 400px down

Answer 1

只需使用 toggleclass 方法http://api.jquery.com/toggleclass/

Answer 2

原始问题是您在需要$(this)时使用了$(this.element)。