jQuery removeClass 的工作方式不正确

Question

有两个按钮（黑色的），和两个（开始时是小的）绿色框，里面有（红色，但开始时未显示）内容。我的目标是使工作完美如下：

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

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

这是我的页面演示： 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() 或将事件处理程序绑定到您的点击处理程序之外）

编辑：这是一个更新的 fiddle，演示调用 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');
        })
    }
});

jQuery removeClass 的工作方式不正确

jQuery removeClass doesn't works the right way

jquery

addclass

removeclass