更改类后，jquery继续选择元素。

Question

我有一个按钮，它必须改变它在满足某些条件后所做的事情。

所以我按它的类来选择按钮，我想在满足条件的时候删除这个类，并向元素中添加一个新的类，并对它做一些其他的事情。但这不管用。

我只是为我的问题做了一个例子。

这是代码：

$('.button-1').click(function(){
    $('.box').width(function(){
        return $(this).width() + 10;
    });
    $(this).removeClass('button-1').addClass('button-2');
});
$('.button-2').click(function(){
    $('.box').width(function(){
        return $(this).width() - 10;
    });
    $(this).removeClass('button-2').addClass('button-1');
});

是小提琴

我预计这将在增加和减少黑匣子宽度之间切换，但它继续增加。

Answer 1

这是因为事件是静态地绑定在按钮上的，所以可以这样使用事件委托：

$(document).on('click','.button-1', function(){
    $('.box').width(function(){
        return $(this).width() + 10;
    });
    $(this).removeClass('button-1').addClass('button-2');
});
$(document).on('click','.button-2', function(){
    $('.box').width(function(){
        return $(this).width() - 10;
    });
    $(this).removeClass('button-2').addClass('button-1');
});

演示

Answer 2

当然，您可以像that...but那样这样做，难道添加另一个变量来检查是否有单击是否更容易吗？代码要简单得多，稍后您可以检查框是否已被放大。

这种方法还将计算风格与计算方法分离开来，这通常被认为是一个好主意。

var large = false;
$('body').on('click', '.button', function(){

if (large) {
    $('.box').addClass('clicked');
    large = false;
} else {
    $('.box').removeClass('clicked');
    large = true;
}

});

此外，您还需要如下所示的css类：

.clicked {
    width: 110px; 
}

我删除了按钮-1和按钮-2类，给div类“按钮”。