- 實(shí)現(xiàn)一個(gè)簡單的樣式轉(zhuǎn)換器，部分代碼如下找田，實(shí)現(xiàn)功能為，當(dāng)點(diǎn)擊Default時(shí)所有文字都會(huì)清空當(dāng)前樣式并轉(zhuǎn)換為原來的樣式着憨，當(dāng)點(diǎn)擊Narrow按鈕是墩衙，字體會(huì)變小，當(dāng)點(diǎn)擊Large所有字體會(huì)變大甲抖，實(shí)現(xiàn)思路為漆改，點(diǎn)擊按鈕則為當(dāng)前的文本添加一個(gè)CSS類。另外一個(gè)是准谚，當(dāng)按鈕被點(diǎn)擊時(shí)字體會(huì)變粗挫剑。
<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;
}
- 第一種方法如下，將當(dāng)前HTML文本的ID和JS結(jié)合在一起
$(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類名的統(tǒng)一性暮顺，使得JS代碼得到簡化，同時(shí)提高了其可維護(hù)性和擴(kuò)展性
$(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');
});
});
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
