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：

＆＃13;

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);
});

＆＃13;

或者，不是连接字符串然后替换空格，而是join()，并使用encodeURIComponent()允许并适当格式化URL的空白区域：

＆＃13;

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);
});

＆＃13;

请注意，上述内容并未“创建带有文件名的图像”。它只是创建一个分配给src元素的<img />属性的字符串;此src 指向服务器上保留的现有<img />。

从2D数组创建图像文件 - JavaScript

1 个答案: