jQuery removeClass 不能以正确的方式工作

Question

有两个按钮（黑色的）和两个（一开始是小尺寸的）绿色框，里面有（红色，但一开始没有显示）内容。我的目标是完美地完成以下工作：

如果我单击第一个按钮，第一个框会变大，并且它的内容将是可见的。如果第二个盒子很大（并且内容可见），在第一个盒子的功能开始之前，先让第二个盒子的内容消失，然后让盒子恢复原来的大小。 因此，对于单击第二个按钮，只需将第二个框变大即可。

我尝试过，但我没有看到代码中有任何逻辑错误。但是，如果我单击第一个按钮，它仍然可以正常工作，但是在单击第二个按钮后，一切都出错了... addClass() 函数添加了“不可见”类，但在它立即删除之后。在事情变得越来越糟之后......

这是我的页面的演示： http://math.bme.hu/~mosonyip/Testing13/testing13.html

请帮助我，我只是网络编程的新手，也很抱歉我的英语不好！

Answer 1

我看到的问题是每次单击按钮时都会重新绑定转换事件

$( "div.button-1" ).click( function() {
    if( $( "div.no2 div.inside" ).hasClass( "invisible" ) != true ) {

        // FOLLOWING LINE IS RE-BOUND EACH TIME WITH ON() 
        $( "div.no2 div.inside" ).addClass( "invisible" ).on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {});
    });
})

在多个地方都是这种情况，因此多个事件处理程序绑定到您的 div（no1、no2）。解决这个问题，它可能会解决您的问题。 （您可以调用off() 或将事件处理程序绑定到您的点击处理程序之外）

编辑：这是一个更新的小提琴，演示调用 off 以防止多事件绑定（脚本也已清理）：http://jsfiddle.net/e98fgcg1/2/

而且代码发生了变化：

var TRANSITIONS = 'transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd';

$('div.button-1, div.button-2').on('click', function() {
    var ORIGINAL = $(this).hasClass('button-1') ? 'div.no1' : 'div.no2';
    var SELECTOR = ORIGINAL === 'div.no1' ? 'div.no2' : 'div.no1';

    if ($(SELECTOR).find('div.inside').hasClass('invisible') !== true) {
        $(SELECTOR).find('div.inside').addClass('invisible').on(TRANSITIONS, function() {
            $(SELECTOR).find('div.inside').off(TRANSITIONS);
            $(SELECTOR).removeClass('bigger').on(TRANSITIONS, function() {
                $(SELECTOR).off(TRANSITIONS);
                $(SELECTOR).removeClass('z-index-2');
                $(ORIGINAL).addClass('z-index-2').addClass('bigger').on(TRANSITIONS, function() {
                    $(ORIGINAL).off(TRANSITIONS);
                    $(ORIGINAL).find('div.inside').removeClass('invisible');
                });
            });
        });
    } else {
        $(ORIGINAL).addClass('z-index-2 bigger').on(TRANSITIONS, function() {
            $(ORIGINAL).off(TRANSITIONS);
            $(ORIGINAL).find('div.inside').removeClass('invisible');
        })
    }
});