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.当我点击#lifther-default按钮时，将首先触发哪个事件？是吗

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

或

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

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

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

Answer 2

JQuery事件处理程序总是按它们绑定的顺序执行。

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

在这个例子中，在调用事件时，某些函数将始终在某个函数之前执行。如果您想要解决此问题，请参阅this other question。

有关您的特定示例，请参阅this jsfiddle。通过消息框完成后，确定框架的工作方式非常简单。

重叠类和点击事件就可以了

2 个答案: