Question

很难解释。我有一个类作为选择器，可点击。点击后，该类将被删除，以便它不再可以点击，直到该类再次添加。

我的代码是这样的：

$('.inactive').click(function(){
     $('.inactive').addClass('active').removeClass('inactive');
     $('#test').animate({ top: "+=20" }, 400);
});

您可以查看this jsfiddle

Answer 1

当我得到您的问题时，您需要在删除该类后停止此行为。尽管您已删除了该类，但DOM的click事件仍然附加了此功能。用

删除它

$(this).off('click');

在DOM操作之后

。

编辑。我认为，你使用的是jQuery v.1.7 +，否则使用：

$(this).unbind('click');

Answer 2

@Anton所说的，或者......

$(document).on('click', '.inactive', function(){
        $(this).addClass('active').removeClass('inactive');
        $('#test').animate({ top: "+=20" }, 400);
});

Answer 3

由于它们是互斥的，因此您不应同时使用inactive和active类。任何一个人都应该做这个工作 - 造型和选择。

在事件触发后分离事件处理程序的最简单方法是使用jQuery的.one()。

你最终会得到这样的东西。

function activate() {
     $(this).removeClass('inactive');
     $('#test').animate({ top: "+=20" }, 400);
}

$('.inactive').one('click', activate);

通过将处理程序定义为命名函数，它仍然可以重新附加。

要使元素再次处于非活动状态，您需要添加“非活动”并重新附加点击处理程序：

var $foo = $(selector);//select an element or elements by whatever means
$foo.each(function() {
    if(!$(this).hasClass('inactive')) {
        $(this).addClass('inactive').one('click', activate);
    }
});

jQuery点击动画向下移动而不用上课

3 个答案: