代入を使った連想配列や多次元配列の取り出し方

多次元配列があったとして、属性をクリックによって書き換えたいとする。

[実行結果]

[ソースコード]

<p>家族の名前は「<span id="myFamily_name" title="クリックしてね">　　　　　</span>」です。</p>

<script type="text/JavaScript">
var myFamily = []; // 多次元配列
	myFamily[0] = {"name" : "わたる" ,  "title" : "ワタル"}; // 連想配列
	myFamily[1] = {"name" : "みずき" , "title" : "ミズキ"};
	myFamily[2] = {"name" : "みかん" , "title" : "ミカン"};
	myFamily[3] = {"name" : "かるび" , "title" : "カルビ"};

	var myFamily_Index = 0;
	
	var change = document.getElementById('myFamily_name');
	
	change.onclick = function(){
		var data = myFamily[myFamily_Index]; // この時点でインデックス番号は0
	
		change.setAttribute("title" , data.title); ※
		change.innerHTML = data["name"]; // data.nameでも可（ブラケット記法とドット記法）
		
		myFamily_Index++; // クリック毎にインデックス番号が1つずつ増加
		
			if(myFamily_Index >= myFamily.length){
				myFamily_Index = 0;
			}
	}
</script>

myFamily[myFamily_Index].title
myFamily[myFamily_Index]["title"]
data.title
data["title"]
は同じ意味だが、複雑になるのでいったんmyFamily[myFamily_Index]をdataに代入してシンプルにしている。

インデックスにもどる