2

当我“ removeClass('below') ”时，它会删除 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');
});
4

4 回答 4

3

到运行 jQuery 代码时，click事件已经绑定到带有 class 的元素.below，并且每次单击元素时，jQuery 实际上不再检查元素的类，因此删除 class 将无济于事这。

您可以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");
});
于 2012-04-25T05:16:48.803 回答
1

采用.off()

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

演示

于 2012-04-25T05:16:13.077 回答
0

您也可以使用

$('.below').live("click",function(){});
于 2012-04-25T05:17:03.233 回答
0

删除类时只需取消绑定事件。

$('#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");
});
于 2012-04-25T05:17:05.007 回答