首頁猿問 jQuery 點(diǎn)擊事件

jQuery 點(diǎn)擊事件

JQuery

thrmagic 2015-12-31 11:40:27

<title>練習(xí)jQuery</title><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><style>.large{font-size:1.5em;color:#333;}#switcher{ position:absolute; right:10px; top:10px; width:220px; height:100px; background-color:#333; }#switcher h3{ margin-left:20px; color:#fff; } #switcher-default{ margin-left:20px; } .narrow{width:300px;}.selected{ font-weight:bold; } </style><script>$(document).ready(function(){ $('#switcher-default').addClass('selected').on('click',function(){ $('.wrap').removeClass(); }); $('#switcher-narrow').on('click',function(){ $('.wrap').removeClass().addClass('narrow'); }); $('#switcher-large').on('click',function(){ $('.wrap').removeClass().addClass('large'); }); $('#switcher button').on('click',function(){ $('#switcher button').removeClass('selected'); $(this).addClass('selected'); }); });</script></head><body> <div class="wrap"> <h3>成都</h3>? ? <span>趙雷</span>? ? <p>讓我掉下眼淚的不止昨夜的酒</p>? ? <p>讓我依依不舍的不止你的溫柔</p>? ? <p>雨路還要走多久你攥著我的手</p>? ? <p>讓我感到為難的是掙扎的自由</p>? ? <p>分別總是在九月回憶是思念的愁 </p>? ? <p>深秋嫩綠的垂柳親吻著我額頭 </p>? ? <p>在那座陰雨的小城里我從未忘記你 </p>? ? <p>成都帶不走的只有你</p>? ? <p>和我在成都的街頭走一走直到所有的燈都熄滅了也不停留 </p>? ? <p>你挽著我的衣袖</p>? ? <p>我會(huì)把手揣進(jìn)褲兜</p>? ? <p>走到玉林路的盡頭坐在小酒吧的門口</p>? ? </div>? ? <div id="switcher" class="switcher">? ? <h3>格式轉(zhuǎn)換</h3>? ? <button id="switcher-default">默認(rèn)</button>? ? <button id="switcher-narrow">窄欄</button>? ? <button id="switcher-large">打印預(yù)覽</button>? ? </div></body>為什么按照書上說的寫的，卻出不來效果，是哪里的問題。

查看完整描述

4 回答

已采納

_亓

TA貢獻(xiàn)33條經(jīng)驗(yàn) 獲得超29個(gè)贊

樓上說的不對應(yīng)該... 你這個(gè)代碼邏輯有問題啊，

$(document).ready(function(){

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

$('.wrap').removeClass();

});

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

$('.wrap').removeClass().addClass('narrow');

});

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

$('.wrap').removeClass().addClass('large');

});

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

$('#switcher button').removeClass('selected');

$(this).addClass('selected');

，你是按類名獲取的標(biāo)簽，既然你都把類名全部移除掉了，哪里還能獲取那個(gè)標(biāo)簽。所以就不可能有效果??！醉了

2 反對回復(fù) 2015-12-31

迷途的馬爾斯
(⊙o⊙)…ORZ

回復(fù) 2015-12-31
_亓
ORZ什么意思？

回復(fù) 2016-01-04
迷途的馬爾斯
失意體前屈

回復(fù) 2016-01-04

點(diǎn)擊展開后面1條

_亓

TA貢獻(xiàn)33條經(jīng)驗(yàn) 獲得超29個(gè)贊

還能自己給自己點(diǎn)贊呢

1 反對回復(fù) 2015-12-31

thrmagic
好牛，感覺豁然開朗，書上是用標(biāo)簽名獲取的標(biāo)簽。

回復(fù) 2015-12-31
_亓
旁觀者清罷了

回復(fù) 2016-01-08

迷途的馬爾斯

TA貢獻(xiàn)72條經(jīng)驗(yàn) 獲得超106個(gè)贊

$('#switcher-default').on('click',function(){
????$('.wrap').removeClass('narrow?large');
});
$('#switcher-narrow').on('click',function(){
????$('.wrap').removeClass('large?').addClass('narrow');
});
$('#switcher-large').on('click',function(){
????$('.wrap').removeClass('narrow').addClass('large');
});

修改一下你代碼的30到38行，就可以了

這里我搜了很多資料都沒有"removeClass().addClass()"的分析，我經(jīng)過多次測試發(fā)現(xiàn)，當(dāng)頁面加載完后你一開始就點(diǎn)擊觸發(fā)removeClass()函數(shù)，會(huì)移除所有的類，就沒有辦法再添加上任何的類，所以你必須給removeClass()方法傳入?yún)?shù)，就像我寫的一樣；即使你一開始不點(diǎn)擊默認(rèn)按鈕，后面的樣式也只能添加一次，這種特性還有待研究，以后再和你分享了>_<

反對回復(fù) 2015-12-31

狂飆的蝸牛_1
想了一下午，都沒想出來怎么回事，現(xiàn)在終于有點(diǎn)明白了

回復(fù) 2015-12-31
thrmagic
謝謝這么認(rèn)真的回答，我也發(fā)現(xiàn)了這個(gè)問題，就是開始就點(diǎn)擊觸發(fā)removeClass()函數(shù)，會(huì)移除所有的類，就沒有辦法再添加上任何的類，；即使一開始不點(diǎn)擊默認(rèn)按鈕，后面的樣式也只能添加一次的問題，但是《jQuery基礎(chǔ)教程（第四版）》，上面說jQuery總是按照我們注冊的順序來觸發(fā)事件處理程序。書里還特別指明，先執(zhí)行.removeClass(),以便它不會(huì)撤銷幾乎同時(shí)執(zhí)行的.addClass(). 這本書不知道你有沒有看過。

回復(fù) 2015-12-31
迷途的馬爾斯
有機(jī)會(huì)會(huì)看的，樓下正解，真粗心-_-||謝了

回復(fù) 2015-12-31