[問題] 迴圈+jquery

看板Web_Design作者 (橘子汁)時間13年前 (2012/08/20 23:03), 編輯推噓9(9推 0噓 31→)
留言40則, 5人參與, 最新討論串1/1
事情是這樣的(￣ ￣；)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
推
08/20 23:17, , 1F
ID選擇器可以這樣用，問題應該出在別的地方
08/20 23:17, 1F
囧 HTML長得要命，不然就貼上來了 這的網頁前面還有fancy box等效果用的JS... 我開一個新檔案再試試看好了，謝謝L大 ※ 編輯: oj113068 來自: 59.126.30.45 (08/20 23:19)
→
08/20 23:18, , 2F
等等..... 把迴圈移到 $(function(){.......})內
08/20 23:18, 2F
→
08/20 23:19, , 3F
我不確定是不是這裡出問題，但這裡看起來怪怪的。
08/20 23:19, 3F
→
08/20 23:19, , 4F
$(function(){.......}) 意思是，在載入dom完畢後去執行，
08/20 23:19, 4F
→
08/20 23:20, , 5F
把它放在迴圈內，感覺怪怪的
08/20 23:20, 5F
@ @!!!好!! ※ 編輯: oj113068 來自: 59.126.30.45 (08/20 23:20)
推
08/20 23:24, , 6F
已經確定id開頭的話可以用div[id^='div']當selector
08/20 23:24, 6F
→
08/20 23:24, , 7F
取得
08/20 23:24, 7F
→
08/20 23:25, , 8F
更正一下 假設你的標籤用div 那麼應該用div[id^='id開頭']
08/20 23:25, 8F
回L大，不行呢...Orz (而且好像只跑出#but19..) 回S大，不是喔 按鈕是input 圖片是img
→
08/20 23:26, , 9F
另外就是其實這個我會透過class去實作...
08/20 23:26, 9F
為什麼呢?如果是不重複的話，id或class有什麼差異嗎@ @
推
08/20 23:27, , 10F
不是立即函數問題 時序問題 你點擊的時候兩個變數的
08/20 23:27, 10F
→
08/20 23:28, , 11F
i都已經等於最後一個數
08/20 23:28, 11F
所以我應該改用...陣列嗎？
推
08/20 23:31, , 12F
根據你的方法 要這樣作closure
08/20 23:31, 12F
→
08/20 23:31, , 13F
08/20 23:31, 13F
不好意思，有個案外案(?)，如果最後i只有19，那#but19不是應該要有效嗎？@ @a
→
08/20 23:31, , 14F
因為在同一層下面你的函數會被取代 所以建立一個閉包
08/20 23:31, 14F
→
08/20 23:31, , 15F
來記錄函數值直到點擊動作完成
08/20 23:31, 15F
→
08/20 23:32, , 16F
不過這種應用建議你還是用this/class去完成
08/20 23:32, 16F
→
08/20 23:33, , 17F
所以全部都指向同一個物件~
08/20 23:33, 17F
→
08/20 23:33, , 18F
綁定的動作是立即完成的 但是點擊的動作是在迴圈之後
08/20 23:33, 18F
謝謝幾位推文的版友~^^" 我好像把事情想的簡單了 Orz 要吸收一下 (我只是想 1.一個的我會寫 2.我會for 3.FLASH可以這樣寫 1+2+3=應該可以不用寫19個 \⊙▽⊙/) ※ 編輯: oj113068 來自: 59.126.30.45 (08/20 23:46)
推
08/20 23:45, , 19F
http://jsfiddle.net/aLuCy/1 給他一個closure就可以了
08/20 23:45, 19F
推
08/20 23:48, , 20F
原來如此....
08/20 23:48, 20F
推
08/20 23:49, , 21F
http://jsfiddle.net/aLuCy/2/ 我會選擇這個寫法
08/20 23:49, 21F
→
08/20 23:49, , 22F
http://jsfiddle.net/aLuCy/3/ 透過class來實作比較簡單
08/20 23:49, 22F
→
08/20 23:49, , 23F
而且抓class應該比抓tag再去比對id快
08/20 23:49, 23F
→
08/20 23:53, , 24F
裡面有些我看不懂的部分...不過還是謝謝S大..Orz
08/20 23:53, 24F
→
08/20 23:54, , 25F
我個人覺得樓上正解，不過我會把數字部份放在HTML屬性中
08/20 23:54, 25F
→
08/20 23:54, , 26F
不然以後碰到順序被人為更動就會有比對不正確的問題
08/20 23:54, 26F
→
08/20 23:56, , 27F
這是極度簡化的case 實際應用時應以實際狀況為準
08/20 23:56, 27F
→
08/20 23:56, , 28F
我只是提供想法...
08/20 23:56, 28F
→
08/20 23:56, , 29F
不懂的地方可以提出來
08/20 23:56, 29F
→
08/20 23:57, , 31F
08/20 23:57, 31F
→
08/20 23:58, , 32F
這兩個reference可以參考一下
08/20 23:58, 32F
→
08/20 23:59, , 33F
呃，因為S大貼的幾方法，我不懂的地方很明顯不是技法或
08/20 23:59, 33F
→
08/21 00:00, , 34F
邏輯，而是我要從基礎用功的部分~^^"
08/21 00:00, 34F
推
08/21 00:01, , 35F
如果是指closure的話 上面有人提原因 我提出的是解法
08/21 00:01, 35F
→
08/21 00:02, , 36F
因此也不知道從何問起。越級打怪，先筆記起來囉
08/21 00:02, 36F
→
08/21 00:02, , 37F
透過closure傳值進去可以避免i的變動影響
08/21 00:02, 37F
推
08/21 00:05, , 38F
s大更簡化了XD 看不懂可以提出來討論 closure & event
08/21 00:05, 38F
→
08/21 00:06, , 39F
是跟其他語言很大的不同
08/21 00:06, 39F
→
08/21 00:19, , 40F
之後如果有問題我絕對不會客氣回文提問的XDDD 謝謝大家
08/21 00:19, 40F
‣ 更多 oj113068 的文章
文章代碼(AID): #1GCb6fd9 (Web_Design)