配列に画像と文字列をセットでに入れたい

Question

javascriptの配列に画像と文字列(変数含む)をセットで格納して、それらをランダムに表示するようにしたいです。ランダムに表示するやり方は理解できたのですが、配列に画像と文字列をセットで格納する方法がわかりません。どなたか書き方を教えていただけないでしょうか？

Comments

[kei344]

ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。また、過去の質問についての返信が無いままになっています。問題が解決したなら「解決済」にされたほうが良いです。

Answer 1

簡単に配列を二重にするだけでもできますよ

var list = [];
//追加
list[1] = ["hoge.png","hogeのコメント"];
list[2] = ["sample.png","sampleのコメント"]
//呼び出し
//hogeのコメントの呼び出し
alert(list[1][2])
//hogeの画像url呼び出し
alert(list[1][1])

Answer 2

Nodeオブジェクトの配列にすれば、同様の取り扱いができるので楽かな、と思います。

var list = [];
list[0] = document.createElement('img');
list[0].setAttribute('src','hoge.jpg');
list[1] = document.createTextNode('fuga');

#####jQueryの場合
タグを見逃してました。jQueryならこんな感じでも。

list[0] = $('<img src="hoge.jpg">');
list[1] = $('<span>fuga</span>');

Answer 3

配列に格納するものをオブジェクトで作れば、プロパティ名で複数の値にアクセスできます。

var list = []; // 配列

//画像
var image1 = new Image();
image1.src = "sample1.jpg";
var image2 = new Image();
image2.src = "sample2.jpg";
var image3 = new Image();
image3.src = "sample3.jpg";

// オブジェクトを格納
list.push({
    imageData:image1,
    textData:"sample1の画像の文字列"
});
list.push({
    imageData:image2,
    textData:"sample2の画像の文字列"
});
list.push({
    imageData:image3,
    textData:"sample3の画像の文字列"
});


var image = list[0].imageData; // 配列0番目のオブジェクトのimageDataプロパティ
var text = list[0].textData; // 配列0番目のオブジェクトのtextDataプロパティ

Comments

[think49]

> imageData:new Image("sample1.jpg"),
new Image の第一引数は width であって src ではないですよ。
new Image( [ width [, height ] ] )
https://momdo.github.io/html51/embedded-content.html#the-img-element

[masaya_ohashi]

Oh、これはなにか別言語と勘違いしたようです。訂正します。