創建一個圖像對象數組

Question

我想創建一個圖像對象的數組，但掙扎。每個對象都會保存圖像和圖像的標題。

下面的代碼工作正常，當我把它粘貼到螢火蟲的檢查：

例1

var imageArray = new Array(); 

imageArray[0] = new Image(); 
console.log(imageArray[0]); //result is <img> 

imageArray[0].src = "my-image-01.png"; 
console.log(imageArray[0]); // result is <img src="my-image-01.png"/> 

imageArray[0] = {imageCaption: "A caption for the image"}; //an object 
console.log(imageArray[0].imageCaption) //result is: A caption for the image 

imageArray[1] = new Image() 

...等

但是，我認爲以下將使更多感覺，但它一直拋出一個錯誤，我不明白爲什麼。

例2

var imageArray = new Array(); 

imageArray[0]= { 
    image01: new Image(), 
    image01.src: "my-image-01.png", //"SyntaxError: missing : after property id" 
    imageCaption: "An image caption" 
    }; 

imageArray[1] = { 
    image02: new Image(). 
    image02.src: "my-image-02.png", 
    imageCaption: "Another image caption" 
    } 

誰能解釋一下什麼錯上面的代碼？我發佈的第一個例子，我應該使用的方法？非常感謝

Answer 1

回到第一個。更改第三行

imageArray[0] = new Image(); 
imageArray[0].src = "my-image-01.png"; 
imageArray[0].imageCaption = "A caption for the image"; 

Answer 2

兩個問題：

• 有一個。代替，在imageArray image02 [1]
• 你不能用一個.作爲對象

的屬性名稱，以便代碼應該是這個樣子：

imageArray[0]= { 
    image: new Image(), 
    src: "my-image-01.png", //"SyntaxError: missing : after property id" 
    caption: "An image caption" 
}; 

imageArray[1] = { 
    image: new Image(). 
    src: "my-image-02.png", 
    caption: "Another image caption" 
} 

Answer 3

您最好的選擇將factory和.push用於圖像數組。

嘗試這樣的事情

// Image factory 
var createImage = function(src, title) { 
    var img = new Image(); 
    img.src = src; 
    img.alt = title; 
    img.title = title; 
    return img; 
}; 

// array of images 
var images = []; 

// push two images to the array 
images.push(createImage("foo.jpg", "foo title")); 
images.push(createImage("bar.jpg", "bar title")); 

// output 
console.log(images); 

輸出

[ 
    <img src=​"foo.jpg" title=​"foo title" alt="foo title">​, 
    <img src=​"bar.jpg" title=​"bar title" alt="bar title">​ 
] 

Answer 4

首先：System.Array的是抽象類，你不能istanziate它。 [您可以使用ArrayList從收藏]

二：到對象中分配一個值initializzation您必須使用「=」，而不是「：」後面 「」像這樣的：新的圖片{SRC =「我 - 圖像-01。PNG」，imageCaption = 「圖像標題」}

代碼：

VAR圖像列表=新的ArrayList（）;

 imageList.Add(new Image { src = "my-image-01.png", imageCaption = "An image caption" }); 
     imageList.Add(new Image { src = "my-image-02.png", imageCaption = "Another image caption" }); 

Answer 5

在你的第一個例子中，你有

var imageArray = new Array(); 
imageArray[0] = new Image(); // an image object 
imageArray[0].src = "my-image-01.png"; // src set in image object 

// Here you are completely destroying the image object and creating a new object 
imageArray[0] = { imageCaption: "A caption for the image" }; //an object 
console.log(imageArray[0]); // Object {imageCaption: "A caption for the image"} 

在你的第二個例子中，你有

imageArray[0]= { 
    image01: new Image(), 
    image01.src: "my-image-01.png", // <-- this is wrong 
    imageCaption: "An image caption" 
}; 

這裏image01只是一個鍵/字符串而不是object而image01.src由於其中的.而發生錯誤，鍵名可以包含_和空格（如果引用，i.r. 'key one'）。所以，你可以這樣使用它，但我認爲你可以刪除image01 : new Image()，並且只要你使用這個對象like this fiddle就可以創建新的圖像。

var imageArray = []; 
imageArray[0] = { 
    image01 : new Image(), 
    src : "my-image-01.png", 
    imageCaption : "Image caption for image-01" 
}; 
imageArray[1] = { 
    image01 : new Image(), 
    src : "my-image-02.png", 
    imageCaption : "Image caption for image-02" 
}; 

for(x = 0; x < imageArray.length; x++) { 
    console.log(imageArray[x].src); 
} 

因此，console.log(imageArray[0].src);將輸出my-image-01.png。如果您想在圖像對象本身使用caption再有就是對圖像對象沒有caption屬性，而是可以使用data-caption或alt以後以某種方式使用，但使用HTML5你可以使用這樣

<figure> 
    <img src="picture.jpg" alt="An awesome picture"> 
    <figcaption>Caption for the awesome picture</figcaption> 
</figure> 

標題

和example here。此外，作爲替代方案，您可以通過示例查看this answer。