Question

我刚学会了所需的最低限度，在我的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";}

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

Answer 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 = ...;
}

Answer 2

您应该使用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]。

Answer 3

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

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

Answer 4

而不是12个不同的vars，你可以拥有一个单独的数组，拥有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：代码未经过测试可行，但它应该有效......

如何增加Javascript变量名称

4 个答案: