DOMオブジェクトの基本操作 (5/5)

■データを保管する

プログラムを作成するとき、必要に応じて各種のデータを保管しておきたいということがよくあります。もしも、それが特定のオブジェクトに関するデータであるならば、jQueryは非常にスマートな解決法を提供してくれます。そのjQueryオブジェクトの中に、データを保管してしまうのです。

jQueryオブジェクトは、自身の中に任意のデータをいくらでも保管しておくことができます。これは、以下のような形で行います。

・データを保管する

《jQuery》.data( 名前 , 値 );

・データを取り出す

変数 =《jQuery》.data( 名前 );

引数に、取り出すデータの名前だけを指定するとその値が得られます。名前と、設定する値の２つを用意すると、その値が指定の名前で保管されます。こうして保管されたデータは、Webページを離れるまで保持され続け、いつでも利用することができます。

※利用例

では、具体的な利用例として、簡単なサンプルを下のリストにあげておきましょう。テキストを入力してボタンを押すと、そのテキストが$('#message')に保管されます。次々にテキストを入力してはボタンをクリックし、テキストをどんどん追加してみてください。

適当にデータを保管したら、表示されているメッセージのテキストをクリックすると、保管したメッセージを順に表示します。クリックするごとにメッセージが変わるのを確認しましょう。

ここでは、２つの処理が用意されています。ボタンをクリックすると、doAction関数で、そのテキストを$('#message')に保管しています。まず、$('#message')から'messages'という名前のデータを取り出します。まだ値がない場合には、new Array(空の配列) を設定しておきます。

var arr = $('#message').data('messages');
if (arr == null) arr = new Array();

そして、配列の「push」メソッドを呼び出して、配列にテキストを追加し、それから'messages'と'counter'の２つのデータを更新します。

$('#message').data('messages',arr).data('counter',0);

表示メッセージをクリックした時の処理は、doChangeで行っています。これも、まずは'messages'と'counter'のそれぞれのデータを変数に取り出します。

var arr = $('#message').data('messages');
var counter = $('#message').data('counter');

続いて、counterの値を１増やし（配列の最後まできていたらまたゼロに戻り）、表示するメッセージの番号を設定します。そして、'messages'の配列からcounterの番号のテキストを取り出してメッセージを表示します。

$('#message').text(arr[counter]).data('counter',counter);

いずれも、メソッドチェーンを使って変更の処理を一括して行うようにしています。実際にやってみるとわかりますが、保管されたデータは、ページを表示している限り、ずっとオブジェクト内に保持され続けていることがわかるでしょう。

必要なデータを保管する場合、まぁ変数などに入れて保管しても良いのですが、オブジェクトに関連するものはオブジェクト自身に保管した方がよりスマートでわかりやすくなります。特に、多数のデータがある場合、すべて変数で保管すると、何が何だかわからなくなってしまうでしょう。オブジェクトごとに整理してデータを保管したほうがはるかにわかりやすいですね。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

<html>
	<head>
		<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
		<script src="jquery-1.4.2.min.js"></script>
		<script type="text/javascript">
		<!--
		function doAction(){
			var arr = $('#message').data('messages');
			if (arr == null) arr = new Array();
			var str = $('#text1').val();
			arr.push(str);
			$('#message').data('messages',arr).data('counter',0);
		}
		
		function doChange(){
			var arr = $('#message').data('messages');
			var counter = $('#message').data('counter');
			counter++;
			if (counter == arr.length) counter = 0;
			$('#message').text(arr[counter]).data('counter',counter);
		}
		//-->
		</script>
	</head>
	<body>
		<H1>TEST.</H1>
		<div id="message" onclick="doChange();">テキストを入力：</div>
		<input type="text" id="text1">
		<input type="button" onclick="doAction();" value="Click">
	</body>
</html>

<< 前へ　

記事のリストに戻る

PC Site G+ mail