javascript - 如何根据使用 jQuery 一次删除的类来强制执行条件

Question

我有一些问题。我需要添加一些类来指定元素一段时间。当这个类在现场时，我想执行一个条件，但如果不是执行另一个条件。有什么不对劲，你能帮帮我吗？这是我的代码：

btn.live('click', function(e){
    info_board.addClass('animation_time');
    setTimeout(function(){
        info_board.removeClass('animation_time')
    }, 700);
    if (info_board.not('animation_time')){
        info_board.addClass('flying_info_board_out').removeClass('flying_info_board');
    }
    else if (info_board.hasClass('animation_time')){
        setTimeout(function(){
            info_board.addClass('flying_info_board_out').removeClass('flying_info_board');
        }, 500);
    }
});

Answer 1

使用时.not()，您仍然需要使用.选择器来定位一个类。所以使用：

if (info_board.not('.animation_time').length > 0){

.length之所以需要，是因为.not()返回一组匹配的元素，这是一个包含 0 个或多个项目的 jQuery 对象。但是 jQuery 对象在if声明中总是真实的。因此，您需要检查正确的事情，即检查从.not()该.length属性返回的匹配元素的数量。

同时，没有理由else if......只需使用else.

由于.hasClass()jQuery 的处理可能比 jQuery 少.not()，因此您不妨使用：

if (!info_board.hasClass("animation_time")) {
    // Your code from the if block
} else {
    // Your code from the else if block
}

Answer 2

您也可以使用hasClass：

if (! info_board.hasClass('animation_time')){

这样做的好处是您可以存储animation_time到变量中，而无需使用字符串连接来构建类名：

btn.live('click', function(e){
    var animClass = 'animation_time';
    info_board.addClass(animClass );
    setTimeout(function(){
        info_board.removeClass(animClass)
    }, 700);
    if (!info_board.hasClass(animClass)){
        info_board.addClass('flying_info_board_out').removeClass('flying_info_board');
    }
    else {
        setTimeout(function(){
            info_board.addClass('flying_info_board_out').removeClass('flying_info_board');
        }, 500);
    }
});