Question

有两个按钮（黑色按钮）和两个（开头小尺寸）绿色框，其中包含（红色，但在开头未显示）内容。我的目标是完美地完成以下工作：

如果我点击第一个按钮，第一个框会变得更大，并且它的内容将会可见。如果第二个框很大（并且它的内容可见），在第一个框的功能开始之前，make会消失第二个框的内容，然后将框设置为原始大小。因此，点击第二个按钮，只需将第二个框放大。

我试图制作它，而且我没有在代码中看到任何逻辑错误。但是，如果我点击第一个按钮，它仍然可以正常工作，但是在我点击第二个按钮后，一切都会出错... addClass（）函数会添加类＆＃34;不可见＆＃34;但它立即删除后。事情变得越来越糟......

以下是我的网页演示： 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');
        })
    }
});

jQuery removeClass不正常工作

1 个答案: