（4）事件处理——（9）让其他按钮可用（Enabling the other buttons）

最新推荐文章于 2024-11-18 14:22:36 发布

翻译最新推荐文章于 2024-11-18 14:22:36 发布 · 1.5k 阅读

Learning jQuery 专栏收录该内容

61 篇文章

订阅专栏

本文介绍了如何通过jQuery为网页的三个按钮添加点击事件处理器，分别实现切换网页布局的功能。包括为默认、窄间距和大号字体按钮添加事件监听器，并相应地修改页面样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

We now have a Large Printbutton that works as advertised, but we need to apply similar handling to the other two buttons (Defaultand Narrow Column) to make them perform their tasks. This is straightforward; we use .bind()to add a clickhandler to each of them, removing and adding classes as necessary. The new code reads as shown in the following code snippet:

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

This is combined with a CSS rule for the narrowclass:

body.narrow .chapter {width: 250px;}

我们现在有了一个像之前介绍的那样工作的大号字体按钮，现在我们需要为另外两个按钮（默认和窄间距按钮）添加相似的处理器，让他们可以完成自己的任务。这次很直接，我们使用.bind()为他们都添加一个click处理器，移去和添加类。新的代码像下面的代码片段一样：

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

这些和为narrow 类设计的css规则一起使用：