[問題] 迴圈+jquery

[oj113068 (橘子汁)]

事情是這樣的(￣ ￣；)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選擇器可以這樣用，問題應該出在別的地方
囧

HTML長得要命，不然就貼上來了

這的網頁前面還有fancy box等效果用的JS...

我開一個新檔案再試試看好了，謝謝L大

※ 編輯: oj113068        來自: 59.126.30.45         (08/20 23:19)
→ LaPass:等等..... 把迴圈移到 $(function(){.......})內
→ LaPass:我不確定是不是這裡出問題，但這裡看起來怪怪的。
→ LaPass:$(function(){.......}) 意思是，在載入dom完畢後去執行，
→ LaPass:把它放在迴圈內，感覺怪怪的
@ @!!!好!!
※ 編輯: oj113068        來自: 59.126.30.45         (08/20 23:20)
推 s25g5d4:已經確定id開頭的話可以用div[id^='div']當selector
→ s25g5d4:取得
→ s25g5d4:更正一下 假設你的標籤用div 那麼應該用div[id^='id開頭']
回L大，不行呢...Orz (而且好像只跑出#but19..)

回S大，不是喔
按鈕是input
圖片是img


→ s25g5d4:另外就是其實這個我會透過class去實作...
為什麼呢?如果是不重複的話，id或class有什麼差異嗎@ @

推 Fantasywind:不是立即函數問題 時序問題 你點擊的時候兩個變數的
→ Fantasywind:i都已經等於最後一個數
所以我應該改用...陣列嗎？

推 Fantasywind:根據你的方法 要這樣作closure
→ Fantasywind:http://jsfiddle.net/ZqteV/
不好意思，有個案外案(?)，如果最後i只有19，那#but19不是應該要有效嗎？@ @a

→ Fantasywind:因為在同一層下面你的函數會被取代 所以建立一個閉包
→ Fantasywind:來記錄函數值直到點擊動作完成
→ Fantasywind:不過這種應用建議你還是用this/class去完成
→ Fantasywind:所以全部都指向同一個物件~
→ Fantasywind:綁定的動作是立即完成的 但是點擊的動作是在迴圈之後
謝謝幾位推文的版友~^^"

我好像把事情想的簡單了 Orz 要吸收一下
(我只是想 1.一個的我會寫 2.我會for 3.FLASH可以這樣寫
 1+2+3=應該可以不用寫19個 \⊙▽⊙/)
※ 編輯: oj113068        來自: 59.126.30.45         (08/20 23:46)
推 s25g5d4:http://jsfiddle.net/aLuCy/1 給他一個closure就可以了
推 LaPass:原來如此....
推 s25g5d4:http://jsfiddle.net/aLuCy/2/ 我會選擇這個寫法
→ s25g5d4:http://jsfiddle.net/aLuCy/3/ 透過class來實作比較簡單
→ s25g5d4:而且抓class應該比抓tag再去比對id快
→ oj113068:裡面有些我看不懂的部分...不過還是謝謝S大..Orz
→ Canboo:我個人覺得樓上正解，不過我會把數字部份放在HTML屬性中
→ Canboo:不然以後碰到順序被人為更動就會有比對不正確的問題
→ s25g5d4:這是極度簡化的case 實際應用時應以實際狀況為準
→ s25g5d4:我只是提供想法...
→ s25g5d4:不懂的地方可以提出來
→ s25g5d4:http://api.jquery.com/attribute-starts-with-selector/
→ s25g5d4:http://api.jquery.com/each/
→ s25g5d4:這兩個reference可以參考一下
→ oj113068:呃，因為S大貼的幾方法，我不懂的地方很明顯不是技法或
→ oj113068:邏輯，而是我要從基礎用功的部分~^^"
推 s25g5d4:如果是指closure的話 上面有人提原因 我提出的是解法
→ oj113068:因此也不知道從何問起。越級打怪，先筆記起來囉
→ s25g5d4:透過closure傳值進去可以避免i的變動影響
推 Fantasywind:s大更簡化了XD 看不懂可以提出來討論 closure & event
→ Fantasywind:是跟其他語言很大的不同
→ oj113068:之後如果有問題我絕對不會客氣回文提問的XDDD 謝謝大家