Question

当我“ removeClass（'下面'）”时，它会删除css类，但当我再次单击该对象时，它会执行相同的操作。

我试图通过删除css代码来取消点击功能的工作能力。我做错了什么？

$('.below').click(function() {
    $(this).removeClass('below');
    $('#welcome').removeClass('fadeInLeft, bounceOutLeft').addClass('fadeOutLeft');
    $('#welcome_search').delay('500').animate({"top": "-=140px"},"slow");
});

我的html看起来与此相似：

<div id="welcome_item" class="below">
    stuff
</div>

请帮帮忙，谢谢。

如果我想在更换课程后重新点击点击该怎么办？

$('.below').click(function() {
    $(this).unbind('click').removeClass('below').addClass('above');
    $('#welcome').removeClass('fadeInLeft bounceOutLeft').addClass('fadeOutLeft');
    $('#welcome_search').delay('500').animate({"top": "-=140px"},"slow");
});

$('.above').click(function() {
    $(this).removeClass('above').addClass('below');
    $('#welcome_search').animate({"top": "+=140px"},"slow");
    $('#welcome').removeClass('fadeInLeft bounceOutLeft fadeOutLeft').delay('500').addClass('fadeInLeft');
});

Answer 1

运行jQuery代码时，click事件已绑定到具有类.below的元素，并且每次单击该元素时，jQuery实际上都不会检查该元素已经存在，因此删除类不会对此有所帮助。

您可以使用unbind代替

http://api.jquery.com/unbind/

$('.below').click(function() {
    $(this).unbind('click');
    $('#welcome').removeClass('fadeInLeft, bounceOutLeft').addClass('fadeOutLeft');
    $('#welcome_search').delay('500').animate({"top": "-=140px"},"slow");
});

Answer 2

使用.off()

删除类是不够的，事件已附加到节点，因此您也应删除附加到它的事件。

<强> DEMO

Answer 3

您也可以使用

$('.below').live("click",function(){});

Answer 4

删除课程时，只需解除绑定即可。

$('#foo').unbind('click');

所以你的js代码应该是这样的。

$('.below').click(function() {
    $(this).unbind('click');
    $(this).removeClass('below');
    $('#welcome').removeClass('fadeInLeft, bounceOutLeft').addClass('fadeOutLeft');
    $('#welcome_search').delay('500').animate({"top": "-=140px"},"slow");
});

jquery animate和removeClass with addClass

4 个答案: