jquery - 重叠类并在其上单击事件

Question

我有一个来自教程的 HTML 页面，每次选择不同的按钮时都会更改页面字体大小。下面是我的 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 按钮时，哪个事件会先被触发？是吗

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

或

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

1. 事件触发的基本规则是什么？

Answer 1

试试这个:

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