- 实现一个简单的样式转换器，部分代码如下，实现功能为，当点击Default时所有文字都会清空当前样式并转换为原来的样式，当点击Narrow按钮是，字体会变小，当点击Large所有字体会变大，实现思路为，点击按钮则为当前的文本添加一个CSS类。另外一个是，当按钮被点击时字体会变粗。
<div id="container">
<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>
body.large .chapter {
font-size: 1.5em;
}
body.narrow .chapter {
width: 250px;
}
.selected {
font-weight: bold;
}
- 第一种方法如下，将当前HTML文本的ID和JS结合在一起
$(document).ready(function() {
$('#switcher-default').addClass('selected');
$('#switcher button').on('click', function() {
$('body').removeClass();
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
});
$('#switcher-narrow').on('click', function() {
$('body').addClass('narrow');
});
$('#switcher-large').on('click', function() {
$('body').addClass('large');
});
});
- 第二种方法如下，通过上下文以及CSS类名的统一性，使得JS代码得到简化，同时提高了其可维护性和扩展性
$(document).ready(function() {
$('#switcher-default').addClass('selected');
$('#switcher button').on('click', function() {
var bodyClass = this.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass();
$(this).addClass('selected');
});
});
