JavaScript的替換從陣列輸出數目與圖像

Question

我有一個代碼至極我倒是希望改變，以輸出圖像，而不是一個號碼

圖像應僅被顯示所謂的拾取輸出的。 在我想使用的圖像中有一個結構，所以如果有人可以如此高興有1或2解釋，我可以做其他43 :)

例如，這裏是一個工作的例子代碼到目前爲止。 http://www.coldcharlie.nl/lotto

我想要的是，當一個數字選擇例如6，這個圖像將顯示alt text http://www.lotto.nl/static/images/ballen/lotto/l6.jpg請不要擔心版權，當代碼設計完成時，我會做我自己的球。

任何幫助將是偉大的。

<script type="text/javascript" src="http://jquery.com/src/jquery-latest.js"></script> 

<div id="players"></div> 
<div id="draws"></div> 

<script type="text/javascript"> 

var players = { 
Joop : ["6","8","16","18","26","28","32","36","38","41"], 
Marijke: ["7","10","14","18","24","29","30","34","39","40"], 
Michel : ["4","5","11","16","21","27","33","36","42","44"], 
Mario : ["6","9","18","25","32","35","39","40","43","45"], 
Diana : ["2","6","8","17","22","23","33","36","42","45"], 
Agnes : ["3","5","10","15","26","29","32","37","41","44"], 
Chris : ["5","7","8","9","11","12","16","28","30","32"], 
Jeannette: ["1","2","4","7","8","11","13","28","30","38"], 
Wieger: ["1","2","3","7","10","13","14","22","23","27"], 
Anita: ["6","13","15","17","21","26","32","33","43","45"], 
Thea: ["1","3","5","7","10","17","19","20","22","38"], 
Danny: ["3","7","11","15","22","28","32","37","40","43"], 
Cindy: ["2","4","16","18","21","24","33","38","41","44"], 
Hanneke: ["1","3","4","12","18","21","25","30","36","40"], 
Willem: ["3","9","17","21","27","33","35","39","41","42"] 
}; 

var draws = [ { 

when: 'Datum: Zaterdag 08-08-2009', 
picks:[2, 13, 15, 18, 21, 41] 
}, 

{ 
when: 'Datum: Zaterdag 15-08-2009', 
picks:[6, 19, 24, 25, 35, 37] 
}, 

{ 
when: 'Datum: Zaterdag 22-08-2009', 
picks:[8, 17, 23, 26, 37, 42] 
} 
]; 

var buildPlayers = function(){ 
var cont = $("#players"); 
for(player in players){ 
var html = ["<div>","<span class='name'>"+player+"</span>", "<ol class='picks'>"]; 
for(var i = 0; i < players[player].length; i++){ 
html.push("<li class='loss pick_"+players[player][i]+"'>"+players[player][i]+"</li>"); 
} 

html.push("</ol>","</div>"); 
cont.append(html.join("")); 
} 
}; 

var buildDraws = function(){ 
var cont = $("#draws"); 
for(var i = 0; i < draws.length; i++){ 
var html = ["<div class='draw'>","<h4 class='drawNum'>Trekking "+(i+1)+"</h3>","<div class='date'>"+draws[i].when+"</div>","<ol class='picks'>"]; 
for(var j = 0; j < draws[i].picks.length; j++){ 
html.push("<li>"+draws[i].picks[j]+"</li>"); 
showWin(draws[i].picks[j]); 
} 
html.push("</ol>","</div>"); 
cont.append(html.join("")); 
} 
}; 

var showWin = function(winNum){ 
$(".pick_"+winNum).removeClass("loss").addClass("win"); 
}; 

$(function(){ 
buildPlayers(); 
buildDraws(); 
}); 
</script> 

Answer 1

更改此

for(var j = 0; j < draws[i].picks.length; j++) { 
     html.push("<li>"+draws[i].picks[j]+"</li>"); 
     showWin(draws[i].picks[j]); 
    } 

到

for(var j = 0; j < draws[i].picks.length; j++) { 
     var img = '<img src="/images/ball-' 
        + draws[i].picks[j] 
        + '.jpg" alt="' 
        + draws[i].picks[j] 
        + '" />'; 
     html.push("<li>"+img+"</li>"); 
     showWin(draws[i].picks[j]); 
    } 

假設您的圖片被命名爲 「球 - ＃」 和位於images目錄。