為什麼這篇jquery function寫法鄉民發文收入到精華區：因為在jquery function寫法這個討論話題中，有許多相關的文章在討論，這篇最有參考價值！作者oj113068 (橘子汁)看板Web_Design標題[問題] 迴圈+jquery時間Mon ...
事情是這樣的(￣ ￣；)a
今天處理某個網頁
網頁中有19個按鈕，分別用jquery把19張圖片fadeIn
當然我一個一個寫也可以，但是又覺得ID是規律的，應該可以用for讓他自己跑吧
(不然以後碰到200個怎麼辦XD)
不過寫了以後卻跑不動，雖然想找原因，但因為我的JS程度還在翻書，書翻了也沒找到答
案，目前沒什麼頭緒，可能觀念上就有問題了吧囧 只好上網求解 Orz
以下是我的寫法
‧如果只有一個按鈕的話，我是這樣寫，#but1是按鈕 #co_1是圖片。
這個寫法是有效的。
$(function(){
$("#but1").click(
function(){
$("#co_1").fadeIn(4000);
});
})
***********
‧寫成for的話，我以為是這樣，但卻沒動
for(var i=1; i<20;i++){
var butNAME='#'+'but'+i;
var cosName='#'+'co_'+i;
$(function(){
$(butNAME).click(
function(){
$(cosNam).fadeIn(4000);
});
})
document.write(butNAME) //這裡我用來確認for的確有跑出我要的ID
}
我想可能是ID選擇器不能用變數直接代替？
不知道應該用什麼方法改成可用的？(硬寫19個也可以，但我只是在想最佳的寫法)
麻煩大家了 <(_ _)>
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.126.30.45
推 LaPass:ID選擇器可以這樣用，問題應該出在別的地方 08/20 23:17
囧
HTML長得要命，不然就貼上來了
這的網頁前面還有fancy box等效果用的JS...
我開一個新檔案再試試看好了，謝謝L大
※ 編輯: oj113068 來自: 59.126.30.45 (08/20 23:19)
→ LaPass:等等..... 把迴圈移到 $(function(){.......})內 08/20 23:18
→ LaPass:我不確定是不是這裡出問題，但這裡看起來怪怪的。 08/20 23:19
→ LaPass:$(function(){.......}) 意思是，在載入dom完畢後去執行， 08/20 23:19
→ LaPass:把它放在迴圈內，感覺怪怪的 08/20 23:20
@ @!!!好!!
※ 編輯: oj113068 來自: 59.126.30.45 (08/20 23:20)
推 s25g5d4:已經確定id開頭的話可以用div[id^='div']當selector 08/20 23:24
→ s25g5d4:取得 08/20 23:24
→ s25g5d4:更正一下 假設你的標籤用div 那麼應該用div[id^='id開頭'] 08/20 23:25
回L大，不行呢...Orz (而且好像只跑出#but19..)
回S大，不是喔
按鈕是input
圖片是img
→ s25g5d4:另外就是其實這個我會透過class去實作... 08/20 23:26
為什麼呢?如果是不重複的話，id或class有什麼差異嗎@ @推 Fantasywind:不是立即函數問題 時序問題 你點擊的時候兩個變數的 08/20 23:27
→ Fantasywind:i都已經等於最後一個數 08/20 23:28
所以我應該改用...陣列嗎？
推 Fantasywind:根據你的方法 要這樣作closure 08/20 23:31
不好意思，有個案外案(?)，如果最後i只有19，那#but19不是應該要有效嗎？@ @a
→ Fantasywind:因為在同一層下面你的函數會被取代 所以建立一個閉包 08/20 23:31
→ Fantasywind:來記錄函數值直到點擊動作完成 08/20 23:31
→ Fantasywind:不過這種應用建議你還是用this/class去完成 08/20 23:32
→ Fantasywind:所以全部都指向同一個物件~ 08/20 23:33
→ Fantasywind:綁定的動作是立即完成的 但是點擊的動作是在迴圈之後 08/20 23:33
謝謝幾位推文的版友~^^"
我好像把事情想的簡單了 Orz 要吸收一下
(我只是想 1.一個的我會寫 2.我會for 3.FLASH可以這樣寫
1+2+3=應該可以不用寫19個 \⊙▽⊙/)
※ 編輯: oj113068 來自: 59.126.30.45 (08/20 23:46)
推 LaPass:原來如此.... 08/20 23:48
→ s25g5d4:而且抓class應該比抓tag再去比對id快 08/20 23:49
→ oj113068:裡面有些我看不懂的部分...不過還是謝謝S大..Orz 08/20 23:53
→ Canboo:我個人覺得樓上正解，不過我會把數字部份放在HTML屬性中 08/20 23:54
→ Canboo:不然以後碰到順序被人為更動就會有比對不正確的問題 08/20 23:54
→ s25g5d4:這是極度簡化的case 實際應用時應以實際狀況為準 08/20 23:56
→ s25g5d4:我只是提供想法... 08/20 23:56
→ s25g5d4:不懂的地方可以提出來 08/20 23:56
→ s25g5d4:這兩個reference可以參考一下 08/20 23:58
→ oj113068:呃，因為S大貼的幾方法，我不懂的地方很明顯不是技法或 08/20 23:59
→ oj113068:邏輯，而是我要從基礎用功的部分~^^" 08/21 00:00
推 s25g5d4:如果是指closure的話 上面有人提原因 我提出的是解法 08/21 00:01
→ oj113068:因此也不知道從何問起。越級打怪，先筆記起來囉 08/21 00:02
→ s25g5d4:透過closure傳值進去可以避免i的變動影響 08/21 00:02
推 Fantasywind:s大更簡化了XD 看不懂可以提出來討論 closure & event 08/21 00:05
→ Fantasywind:是跟其他語言很大的不同 08/21 00:06
→ oj113068:之後如果有問題我絕對不會客氣回文提問的XDDD 謝謝大家 08/21 00:19