発生したイベントの状態を保持・保存する6つのパターン - jQuery入門
目次
- jQuery入門
- jQueryのインストール・簡単な使い方
- クイズゲームの作り方
- 秘密の暗号を作ってみよう（たぬき暗号）
- アクションゲームを作ってみよう（ぬりかべ）
- 画像を使ったジグソーパズルを作ってみよう
- もぐらたたきっぽいゲーム
- ドラッグ可能なポップアップウインドウを作ろう
- jQuery UI Sortableで１ラインオセロゲーム
- ブラウザ全体をブロックしてみる
- Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする
- 発生したイベントの状態を保持・保存する6つのパターン
- Ajaxを利用したシンプルなイメージギャラリーを作ってみる
- テーブルにページ送り（ページング）を実装してみる
- jQuery UI Draggableを使って付箋(sticky)を作ってみる
- カラムでソートできるテーブルを自作してみる
- テーブルを使ったシンプルなドット絵エディタを作ってみる
- iPhoneのようにマウスではじいてスクロール（フリックスクロール）を実装してみる
- テキストフィールドの数値をマウスの上下移動で増減する
- iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる
- iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する
- リアルタイムプレビュー付きのHTMLエディタを作ろう
- 保存できる付箋を作ってみる(Cookie、localStorage）
イベントの状態を保持するパターン
仕事でjQueryを触ってみて、結局jQuery(JavaScript)でやることのほとんどは、DOM要素へのユーザーのイベント（クリックやキー入力など）の状態を保持しておき、最終的にGETやPOSTでサーバアプリに値を送る、という感じだと感じました。そんなわけで、イベントの状態を保持する方法を6パターンほど考えました。
実行サンプル
テーブルの各セルをクリックするたびに背景色が黄色と白でトグルするサンプルで、保持パターンを考えます。１．変化したCSSの値をそのままチェックする
何かイベントが起こった後というのはふつう、対象となるDOM要素の色が変わっていたり大きさが変わっていたりするので、その値を直接見るという、一番シンプルな方法です。state_save1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<title>状態保存１（CSSの値をチェック）</title>
<script>
$(function() {
$('td').mousedown(function() {
if ($(this).css('backgroundColor') == 'yellow') {
$(this).css('backgroundColor', 'white');
} else {
$(this).css('backgroundColor', 'yellow');
}
});
});
</script>
<style>
td {
background-color: white;
border: 1px solid black;
padding: 8px;
cursor: pointer;
}
</style>
</head>
<body>
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
</body>
</html>
シンプルで良さそうですが、ブラウザによっては動いたり動かなかったりします。背景色の「white」や「yellow」の値がRGBの数値で格納されるのが原因のようです。このようにCSSの値を直接チェックするのは危険なものがあります。２．クラスの追加・削除
２番目の方法は、イベントの状態を各要素ごとにクラスを追加・削除して管理する方法です。jQueryにはクラスを追加・削除する便利なメソッドがいくつか用意されています。以下にスクリプト部分を示します。state_save2.html
・・・
<script>
$(function() {
$('td').mousedown(function() {
$(this).toggleClass('selected');
});
});
</script>
<style>
td {
background-color: white;
border: 1px solid black;
padding: 8px;
cursor: pointer;
}
td.selected {
background-color: yellow;
}
</style>
・・・
ずいぶんシンプルになりました。toggleClassによってselectedクラスがあれば消し、無ければ追加しています。クラスをトグルすると同時に色も変化するので直感的な方法だと思います。３．オリジナルの属性値として保存する
簡単なものならば２番目の方法で十分なのですが、保持する情報が複雑になってくると別の方法を考えなければなりません。３番目は、タグに値を保存する専用の属性を用意する方法です。以下にサンプルを示します。state_save3.html
・・・
<script>
$(function() {
$('td').mousedown(function() {
if ($(this).attr('color') == 'yellow') {
$(this).attr('color', 'white');
} else {
$(this).attr('color', 'yellow');
}
$(this).css('backgroundColor', $(this).attr('color'));
});
});
</script>
・・・
「color」というタグの属性を用意してそこに現在の色を保存しています。一応動きますが、勝手に独自の属性を増やしていいのか分かりません。やっちゃダメかも。４．値を保存する場所を外に出す
規模が大きくなってきたら、値を保持する領域は外出しの配列などにしたほうが、デザインとの分離が出来て良いと思います。以下にスクリプト部分を示します。state_save4.html
・・・
<script>
$(function() {
var colors = [];
$('td').mousedown(function() {
var n = this.id.split('_')[1] - 1;
if (colors[n] == 'yellow') {
colors[n] = 'white';
} else {
colors[n] = 'yellow';
}
$(this).css('backgroundColor', colors[n]);
});
});
</script>
<style>
td {
background-color: white;
border: 1px solid black;
padding: 8px;
cursor: pointer;
}
</style>
</head>
<body>
<table>
<tr><td id="td_1">1</td><td id="td_2">2</td><td id="td_3">3</td></tr>
<tr><td id="td_4">4</td><td id="td_5">5</td><td id="td_6">6</td></tr>
<tr><td id="td_7">7</td><td id="td_8">8</td><td id="td_9">9</td></tr>
</table>
・・・
テーブルのそれぞれのセルにIDを付けているのがポイントです。このID値によってクリックされた要素がどの要素か判別し、配列colorsに状態を保持します。デメリットとしてて、管理する情報が多くなってしまいます。５．DOM要素のプロパティに保持する
そもそもDOM要素はJavaScriptのオブジェクトなので、そのプロパティとして情報を保持してしまえばシンプルで楽です。state_save5.html
・・・
<script>
$(function() {
$('td').mousedown(function() {
if (this.color == 'yellow') this.color = 'white';
else this.color = 'yellow';
$(this).css('backgroundColor', this.color);
});
});
</script>
・・・
この方法はシンプルなのですが、オブジェクトのプロパティとして既に定義されているものと重複する危険性があります。６．dataメソッドで保持する
jQueryオブジェクトのdataメソッドというものを使うと、オブジェクトに独自のデータをいくらでも追加することができます。以下にサンプルを示します。state_save6.html
・・・
<script>
$(function() {
$('td').mousedown(function() {
if ($(this).data('color') == 'yellow') {
$(this).data('color', 'white');
} else {
$(this).data('color', 'yellow');
}
$(this).css('backgroundColor', $(this).data('color'));
});
});
</script>
・・・
jQueryっぽく、直感的に安全に使えると思います。
ツイート
そっか0