[請益] 有關多個圖片更換

看板Web_Design作者 (汶)時間10年前 (2013/10/11 19:50), 編輯推噓3(3014)
留言17則, 6人參與, 最新討論串1/1
現在在學javascript 這周老師教到math.random、for loop、bubble sort... 在寫作業的時候想要有點變化 打算做預測樂透開獎的程式 我做了49顆銀色的球 想要讓被抽中的色球換色 Google只找到針對單一圖片作變換的函數 將圖片名稱設為pic 新圖路徑設進imgfile[] function changeImage(){ document.pic.src = imgfile[0] } 想請問要怎麼寫才能讓亂數抽出的號碼變色呢? document.pic.src 這中間有辦法插入變數嗎? 苦惱好久了 真的無解嗎? -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 140.119.120.1

10/11 20:36, , 1F
兩種方法 一個是eval 一個是把所有pic存在陣列裡面
10/11 20:36, 1F
p大是指把銀球的圖也存在陣列裡嗎?

10/11 21:54, , 2F
可以改變class就可以用css去做了? :p
10/11 21:54, 2F

10/11 23:08, , 3F
先問需求... 你有49顆都是銀色的球 然後要變色?
10/11 23:08, 3F
恩 本來有49顆銀色的球(s1-s49) 亂數取六個數字 要把這六個數變成紅色的球(r1-r49)

10/12 00:17, , 4F
http://jsfiddle.net/CN8jK/1/ js新手,有錯請指正...
10/12 00:17, 4F

10/12 01:02, , 5F
直接改class最快也最好
10/12 01:02, 5F
感謝以上大家回應 我目前不太懂改Class的意思 我想我研究一下s大的寫法再上來發問好了 -- 所以大家說的利用class 是指 document.getElementsByClassName(); 這個函數嗎? 我好像有點懂了 來試試會不會成功 -- 我又遇到了一個問題 因為重新選號時希望色球會先都回復成銀色 再依新選中的號碼變色 所以我寫了 function resetpic(){ var my_pic = document.getElementsByClassName("sball"); for(var i=0;i<49;i++){ my_pic[i-1].src = "pic/s"+i+".png"; } } 但是debug的時候他說Cannot set property 'src' of undefined 是因為my_pic[]不能直接放變數嗎?

10/12 23:32, , 6F
為何要 i-1 ? => i=0 => 0-1 = -1 => pic[-1] = 沒東西
10/12 23:32, 6F

10/12 23:33, , 7F
看你的寫法&需求
10/12 23:33, 7F

10/12 23:33, , 8F
my_pic[i].src = "pic/s"+(i+1)+".png";
10/12 23:33, 8F

10/12 23:33, , 9F
這樣才對吧?
10/12 23:33, 9F
對耶! 成功重置圖片了 可是de完一個bug下一隻又跑出來了 重置完圖片我的網頁又掛掉了 能請板眾直接幫我看問題到底出在哪裡嗎? http://goo.gl/49VfM6 (dropbox連結)

10/13 03:13, , 10F
問題出在你把 49 改成了 50... XD
10/13 03:13, 10F

10/13 03:14, , 11F
你要嘛就是像樓上說的用 i 和 i+1
10/13 03:14, 11F

10/13 03:14, , 12F
不然就是 var i=1;i<50;i++
10/13 03:14, 12F

10/13 03:14, , 13F
因為有 49 張圖,所以他們在陣列裡的索引會是 0 ~ 48
10/13 03:14, 13F

10/13 03:16, , 14F
啊,我上面沒說清楚XD 你已經像樓上說的用i和i+1的話,那就
10/13 03:16, 14F

10/13 03:17, , 15F
不用動for。如果要動for,那就是i-1和i不動,上面變i=1;i<50
10/13 03:17, 15F

10/13 03:19, , 16F
對了,數字其實可以不寫死,用my_pic.length可以直接取得
10/13 03:19, 16F

10/13 03:19, , 17F
陣列的長度 =)
10/13 03:19, 17F
哇! 成功了! 原來只是因為for沒設好 感謝大家~~ 看他成功跑出來超開心的 XD ※ 編輯: lily50735 來自: 1.164.208.125 (10/13 07:54)
文章代碼(AID): #1IL-NrD- (Web_Design)