Создание массива объектов изображения

Question

Я пытаюсь создать массив объектов изображения, но борется. Каждый объект будет содержать изображение и подпись для изображения.

Следующий код работает отлично, когда я вставить его в Firebug для проверки:

Пример 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

Два вопроса:

• есть. вместо, в image02 в imageArray [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 для массива изображений.

Try что-то вроде этого

// 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 = «мой -image-01.PNG», imageCaption = "Изображение заголовка"}

код:

вар Imagelist = новый 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 делает ошибку из-за . в ней, имя ключа может содержать _ и пробел (если указано, например. '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.