jQuery的添加和删除类 - 动画下半年不起作用

林制作概念页的一个简单证明使用jQuery：jQuery的添加和删除类 - 动画下半年不起作用

$('.notclicked').click(function() { 
    $(this).addClass("clicked"); 
    $(this).removeClass("notclicked"); 
     $('.maps-cont').animate({ 
     left: '0' 
     }, 500, function() { 
     // Animation complete. 
     }); 
    }); 

    $('.clicked').click(function() { 
    $(this).addClass("notclicked"); 
    $(this).removeClass("clicked"); 
     $('.maps-cont').animate({ 
     left: '-320px' 
     }, 500, function() { 
     // Animation complete. 
     }); 
    });

的想法是，点击div.notclicked做的第一部分动画，然后将类更改为div.clicked，然后当类已更改时，可以使用第二位代码触发注释的第二部分。但由于某些原因，代码的第二部分不起作用，新的类未分配并且动画不能运行。

这只是一个概念证明，所以我知道点击动画时正在进行可能会导致问题。而不是让我的代码完全重写为可能更好，但我不明白，更重要的是有这个代码修复，如果ive做了一个简单的错误。谢谢

来源

2012-02-16 Evans

尝试使用.on来附加您的点击事件，因为具有指定类的未来元素不会附加事件处理程序。 .on现在和将来绑定事件处理程序。

在下面的代码中，您可以用该元素所在的父元素替换文档。我只是以该文档为例。

$(document).on('click','.clicked', function() {     
    $(this).removeClass("clicked").addClass('notclicked'); 
}); 

$(document).on('click', '.notclicked' ,function() {     
    $(this).removeClass("notclicked").addClass('clicked');  
});

这里有一个fiddle。

来源

2012-02-16 17:20:52

当调用click方法时，click事件处理程序绑定到与选择器匹配的DOM实体。尝试on方法代替：

$('#idOfParentElement').on('click', '.clicked', function(e) { ... });

来源

2012-02-16 17:25:04

你可以只用一个处理程序管理。

//Assuming the default class on the element is notclicked 
$('.notclicked').click(function() { 
     var $this = $(this); 
     $('.maps-cont').animate({ 
     left: $this.hasClass('notclicked') ? '0' : '-320px' 
     }, 500, function() { 
     // Animation complete. 
     }); 
     $this.addClass("clicked").removeClass("notclicked"); 
});

$('.clicked').click(function(){....})没有在页面加载$('.clicked')，因为工作给空集这样的jQuery不能附加在其上的事件处理程序。

来源

2012-02-16 17:25:32 ShankarSangoli

“与其让我的代码完全重写的东西，可能是更好，但我不明白，更重要的是有这个代码修复，如果ive做了一个简单的错误，谢谢“ – Evans 2012-02-16 17:31:54

jdln我创建了一个小提琴，看看它。 – 2012-02-16 17:43:10

@jdln - 这取决于您是否使用正确的解决方案，或者只是很乐意修复您的代码。如果你清楚地看到代码，只有一个条件来检查它是否具有notclicked类，然后将left设置为0，否则设置为-320。 – ShankarSangoli 2012-02-16 18:29:15

类违背了我的意愿不rewite我的代码，但看的方法真的把我弄糊涂伊夫这个管理它：

$('.filters').toggle(
     function() 
     { 
      $('.maps-cont').animate({ 
      left: "0" 
    }, 500); 
     }, 
     function() 
     { 
      $('.maps-cont').animate({ 
      left: "-320" 
      }, 500); 
    });

来源

2012-02-16 17:45:09 Evans

jQuery的添加和删除类 - 动画下半年不起作用

回答

相关问题