課程
/前端開發(fā)
/jQuery
/jQuery基礎(chǔ)課程
bind() ?和 toggle()
2016-03-09
源自:jQuery基礎(chǔ)課程 6-4
正在回答
toggle()方法支持目前主流穩(wěn)定的jQuery版本1.8.2,在1.9.0之后的版本是不支持的。
吃瓜小夏 提問者
這個就是邏輯上思維混亂造成的不明白出現(xiàn)在哪里了,幸虧遇見了如此聰慧過人的灑家,既然你發(fā)問了,灑家就大慈大悲的告訴你,小鬼,記?。簍oggle后面括號為空時,綁定了點(diǎn)擊事件,那它切換的是隱藏和顯示之間。而你在toggle里加入了三個函數(shù),則運(yùn)行時,此時按鈕下面是一直展示出來,你點(diǎn)擊展示出來的沒有變化,而當(dāng)你點(diǎn)一下按鈕后,它依然沒有變化嗎?當(dāng)然不是,你再點(diǎn)擊一下按鈕下那個一直展示的地方,開始切換了!沒錯,開始切換了,那么一切都可以解釋出來。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
? ? <head>
? ? ? ? <title>toggle()方法綁定多個函數(shù)</title>
? ? ? ? <script src="http://libs.baidu.com/jquery/1.8.2/jquery.js" type="text/javascript"></script>
? ? ? ? <link href="style.css" rel="stylesheet" type="text/css" />
? ? </head>
? ? <body>
? ? ? ? <h3>toggle()方法綁定多個函數(shù)</h3>
? ? ? ? <input id="btntest" type="button" value="點(diǎn)一下我" />
? ? ? ? <div>我是動態(tài)顯示的</div>
? ? ? ??
? ? ? ? <script type="text/javascript">
? ? ? ? ? ? $(function () {
? ? ? ? ? ? ? ? $("#btntest").bind("click", function () {
? ? ? ? ? ? ? ? $("div").toggle(
? ? ? ? ? ? ? ? ? ? function(){$(this).html("1")},
? ? ? ? ? ? ? ? ? ? function(){$(this).html("2")},
? ? ? ? ? ? ? ? ? ? function(){$(this).html("3")}
? ? ? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ? })
? ? ? ? ? ? });
? ? ? ? </script>
? ? </body>
</html>
舉報(bào)
加入課程學(xué)習(xí),有效提高前端開發(fā)速度
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2016-03-16
toggle()方法支持目前主流穩(wěn)定的jQuery版本1.8.2,在1.9.0之后的版本是不支持的。
2016-03-22
這個就是邏輯上思維混亂造成的不明白出現(xiàn)在哪里了,幸虧遇見了如此聰慧過人的灑家,既然你發(fā)問了,灑家就大慈大悲的告訴你,小鬼,記?。簍oggle后面括號為空時,綁定了點(diǎn)擊事件,那它切換的是隱藏和顯示之間。而你在toggle里加入了三個函數(shù),則運(yùn)行時,此時按鈕下面是一直展示出來,你點(diǎn)擊展示出來的沒有變化,而當(dāng)你點(diǎn)一下按鈕后,它依然沒有變化嗎?當(dāng)然不是,你再點(diǎn)擊一下按鈕下那個一直展示的地方,開始切換了!沒錯,開始切換了,那么一切都可以解釋出來。
2016-03-09
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
? ? <head>
? ? ? ? <title>toggle()方法綁定多個函數(shù)</title>
? ? ? ? <script src="http://libs.baidu.com/jquery/1.8.2/jquery.js" type="text/javascript"></script>
? ? ? ? <link href="style.css" rel="stylesheet" type="text/css" />
? ? </head>
? ? <body>
? ? ? ? <h3>toggle()方法綁定多個函數(shù)</h3>
? ? ? ? <input id="btntest" type="button" value="點(diǎn)一下我" />
? ? ? ? <div>我是動態(tài)顯示的</div>
? ? ? ??
? ? ? ? <script type="text/javascript">
? ? ? ? ? ? $(function () {
? ? ? ? ? ? ? ? $("#btntest").bind("click", function () {
? ? ? ? ? ? ? ? $("div").toggle(
? ? ? ? ? ? ? ? ? ? function(){$(this).html("1")},
? ? ? ? ? ? ? ? ? ? function(){$(this).html("2")},
? ? ? ? ? ? ? ? ? ? function(){$(this).html("3")}
? ? ? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ? })
? ? ? ? ? ? });
? ? ? ? </script>
? ? </body>
</html>