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');
});

并且它是Fiddle

我希望这可以在增加和减少黑盒子宽度之间切换，但它会不断增加。

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');
});

DEMO

Answer 2

当然你可以这样做......但是添加另一个检查是否有点击的变量是不是更容易？代码更简单，您可以稍后检查该框是否已放大。

这种方法也将计算中的风格分开，这通常被认为是一个好主意。

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; 
}

我删除了那个button-1和button-2类，给了div'类'按钮'而不是

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

2 个答案: