重疊類和點擊事件

Question

我有一個教程的HTML頁面，每次選擇不同的按鈕時，頁面字體大小的變化..Below是我的HTML代碼和Js代碼。

<div id="switcher" class="switcher"> 
    <h3>Style Switcher</h3> 
    <button id="switcher-default"> 
     Default 
    </button> 
    <button id="switcher-narrow"> 
     Narrow Column 
    </button> 
    <button id="switcher-large"> 
     Large Print 
    </button> 
</div> 

JS：

$(document).ready(function() { 
    $('#switcher-default').addClass('selected').on('click', function() { 
     $('body').removeClass('narrow').removeClass('large'); 
    }); 

    $('#switcher-narrow').on('click', function() { 
     $('body').addClass('narrow').removeClass('large'); 
    }); 


    $('#switcher-large').on('click', function() { 
     $('body').removeClass('narrow').addClass('large'); 
    }); 

    $('#switcher button').on('click',function(){ 
     $('#switcher button').removeClass('selected'); 
     $(this).addClass('selected'); 
    }) 

}); 

問： 1.當我點擊＃切換默認的按鈕，這事件將首先觸發？它是

$('#switcher-default').addClass('selected').on('click' 

或

$('#switcher button').on('click',function(){ 

1. 什麼是事件觸發的基本規則？

Answer 1

JQuery事件處理程序總是按它們綁定的順序執行。

someobject.click(somefunction) 
someobject.click(someotherfunction) 

在這個例子中，當某個函數被調用時，某個函數總會被執行。如果您想要解決這個問題，請參閱this other question。請參閱this jsfiddle。通過消息框來確定框架的工作方式非常簡單。

Answer 2

試試這個：

$(document).ready(function() { 

     $('#switcher-default').on('click', function() { 
      $('#switcher button').removeClass('selected'); 
      $(this).addClass('selected'); 
      $('body').removeClass('narrow').removeClass('large'); 

     }); 

     $('#switcher-narrow').on('click', function() { 
      $('#switcher button').removeClass('selected'); 
      $(this).addClass('selected'); 
      $('body').addClass('narrow').removeClass('large'); 
     }); 


     $('#switcher-large').on('click', function() { 
      $('#switcher button').removeClass('selected'); 
      $(this).addClass('selected'); 
      $('body').removeClass('narrow').addClass('large'); 
     }); 
});