jQuery removeClass不能正常工作

Question

有兩個按鈕（黑色的）和兩個（開頭小的）綠色框（紅色，但在開始時未顯示）內容。我的目標是完美地完成以下任務：

如果我點擊第一個按鈕，第一個框會獲得更大的尺寸，並且它的內容將可見。如果第二個盒子很大（並且它的內容可見），則在第一個盒子的功能開始之前，使第二個盒子的內容消失，然後使該盒子變爲原始大小。 對於單擊第二個按鈕，只需將第二個框放大即可。

我試圖做到這一點，而且在代碼中看不到任何邏輯錯誤。但是，如果我點擊第一個按鈕，它仍然有效，但是當我點擊第二個按鈕後，一切都出錯...... addClass（）函數將類「不可見」添加到類中，但在它立即刪除之後。而之後的事情剛剛從每況愈下......

這裏是我的網頁的演示： http://math.bme.hu/~mosonyip/Testing13/testing13.html

請幫助我，我只是在webprogramming一個新手，也對不起我的壞英語！

Answer 1

我看到的問題是，你重新綁定，每次你TRANSTION事件，你按一下按鈕

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