從2D數組創建圖像文件-JavaScript

Question

我想創建一張紙牌列表，但是它會返回不同的信息，而不是輕松編號為1-13的紙牌列表。 以棒球運動員及其本壘打總數為例，我創建了這個2D數組，一個用於創建Player對象的函數以及一個用於創建圖像文件名的函數：

var players = [
    ['Barry Bonds', 'LF', 73],
    ['Mark McGwire', '1B', 70],
    ['Jean Beliveau', 'RF', 66],
    ['Roger Maris', 'RF', 61],
]

function Player(name,position,rating) {
    this.name = name;
    this.position = position;
    this.homeruns = homeruns;
    this.fname = fname;
}

function fname() {
    return "images/" + this.name + " " + this.position + " " + this.rating + ".jpg";
}

在那之后，它變得凌亂。 我的想法是，對於要返回的每條信息，我將使用players[i][#]使用循環來捕獲2D數組的第一列。 我直接從教程中改編的部分看起來像這樣，並且肯定充滿了邏輯錯誤：

function list()
this.players = new Array(3);
this.bpa = 0;
for (i=0; i<3; i++) {      
this.players[i-1] = new Player(name,position,homeruns)
var name = players[i][0];
var position = players[i][1];
var homeruns = players[i][2];}
this.createList = createList}
function createList() {
return this.players [ this.bpa++ ];}

我打算做很多事情，但我至少想弄清楚如何生成至少一個文件名如“ Barry Bonds LF 73.jpg”的圖像並將其打印到網頁上在我找出其他任何東西之前。 有人可以在這里指出正確的方向嗎？

Answer 1

要從數組的元素創建圖像的src ，請執行以下操作：

 var players = [ ['Barry Bonds', 'LF', 73], ['Mark McGwire', '1B', 70], ['Jean Beliveau', 'RF', 66], ['Roger Maris', 'RF', 61], ], // create an <img> element: image = document.createElement('img'), // an empty variable to be used later: tempClone, // the element to which you want to add the image elements: target = document.body; // iterates over the 'players' array: players.forEach(function (arrayElement) { // arrayElement is the element of the players array over which we're // currently iterating (the name is unimportant, but it's always // the first argument): // cloning the created image, assigning it to created variable: tempClone = image.cloneNode(); // setting the 'src' property to a string, // joining together each of the contents of the array element (with // an empty string, and then replacing any white-space with an empty // string and appending '.jpg': tempClone.src = arrayElement.join('').replace(/\\s+/,'') + '.jpg'; // appending the newly-cloned <img> element to the 'target' parent: target.appendChild(tempClone); }); 

或者，您可以join()它們，然后使用encodeURIComponent()來允許並適當地格式化URL的空格，而不是連接字符串然后替換空白：

 var players = [ ['Barry Bonds', 'LF', 73], ['Mark McGwire', '1B', 70], ['Jean Beliveau', 'RF', 66], ['Roger Maris', 'RF', 61], ], // create an <img> element: image = document.createElement('img'), // an empty variable to be used later: tempClone, // the element to which you want to add the image elements: target = document.body; // iterates over the 'players' array: players.forEach(function (arrayElement) { // arrayElement is the element of the players array over which we're // currently iterating (the name is unimportant, but it's always // the first argument): // cloning the created image, assigning it to created variable: tempClone = image.cloneNode(); // setting the 'src' property: tempClone.src = encodeURIComponent(arrayElement.join('')+ '.jpg'); // appending the newly-cloned <img> element to the 'target' parent: target.appendChild(tempClone); }); 

注意上面的內容不是“用文件名創建圖像”，它只是創建一個分配給<img />元素的src屬性的字符串。 此src應該指向服務器上現有的<img /> 。