如何增加Javascript变量名[关闭]答案

【问题标题】：How to increment Javascript variable names [closed]如何增加Javascript变量名[关闭]
【发布时间】：2012-10-02 03:12:06
【问题描述】：

我刚刚学会了在我的 ebay + 网站列表中生成缩略图所需的最低要求。基本上，我在一个列表中最多有 12 张图片，并且为了在创建新列表时不必为每张图片写出 URL，我已将其设置为只需要编写一次文件名（变量“picname ") 和图片数量（变量“picnum”），剩下的交给 javascript。它工作正常，但似乎很啰嗦。

如何缩短/优化代码？我确信某种循环可以解决问题，但是经过一整天的搜索和大量试验和错误之后，我就是想不通。

我想将以下代码块缩短/优化成一个循环：

imagenum=1;
if (imagenum <= picnum) {image1 = new Image(); image1.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb1 = new Image(); thumb1.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image2 = new Image(); image2.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb2 = new Image(); thumb2.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image3 = new Image(); image3.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb3 = new Image(); thumb3.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";;imagenum++;}
if (imagenum <= picnum) {image4 = new Image(); image4.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb4 = new Image(); thumb4.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image5 = new Image(); image5.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb5 = new Image(); thumb5.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image6 = new Image(); image6.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb6 = new Image(); thumb6.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image7 = new Image(); image7.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb7 = new Image(); thumb7.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image8 = new Image(); image8.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb8 = new Image(); thumb8.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image9 = new Image(); image9.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb9 = new Image(); thumb9.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image10 = new Image(); image10.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb10 = new Image(); thumb10.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image11 = new Image(); image11.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb11 = new Image(); thumb11.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image12 = new Image(); image12.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb12 = new Image(); thumb12.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}

我假设我需要以下内容：

for (imagenum=1; imagenum<picnum; imagenum++) {image(imagenum) = new Image(); image(imagenum).src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb(imagenum) = new Image(); thumb(imagenum).src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";}

但是我显然有语法错误，因为那不起作用。我不知道如何使变量名随着循环的每个循环而递增，非常感谢一些帮助！

【问题讨论】：

完成后，你对所有这些变量做了什么？
应该在codereview.stackexchange.com
变量用于生成缩略图，这是我的一个旧“冗长”版本的列表示例：ebay.co.uk/itm/… 抱歉，如果我在错误的部分发布了这个，也许是一种mod可以移动吗？

标签： javascript variables loops increment

【解决方案1】：

使用数组。像这样的：

var images = [];
for (var i = 0; i < picnum; i++)
{
    images[i] = {
        Image: new Image(),
        Thumb: new Image()
    };

    images[i].Image.src = ...;
    images[i].Thumb.src = ...;
}

【讨论】：

【解决方案2】：

您需要使用方括号来引用数组。

var myImages = [];
for (var i=1; i<10; i++) {
    var newImg = new Image();
    newImage.src = "foo.gif";
    myImages[i] = newImage;
}

【讨论】：

【解决方案3】：

您应该为此类任务使用Array。因此，按照上面的代码可能会起作用：

// create the array
var images = [], thumbs = [];

// loop through all images
for ( var imagenum=1; imagenum<picnum; imagenum++) {
  images[imagenum] = new Image(); 
  images[imagenum].src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; 
  thumbs[imagenum] = new Image(); 
  thumbs[imagenum].src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";
}

然后您可以通过images[1] 和thumbs[1] 访问所有图像和相应的缩略图。

【讨论】：

【解决方案4】：

您可以拥有一个包含 12 个不同对象的数组，而不是 12 个不同的变量。那么你的代码应该是这样的：

var imgArray = [];
var thumbArray = [];
for (var i = 0; i < 12; i++) {
    var img = new Image();
    img.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+i+").jpg";
    imgArray.push(img);
    var tmb = new Image();
    tmb.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+i+").jpg";
    thumbArray.push(tmb);
}

PS：代码没有经过测试可以正常工作，但它应该可以工作......

【讨论】：