ＳＱＬの窓
<< Java : バッチでテ… | TOP | WPF(C#) : ExecuteQ… >>

2013年10月17日


JSON オブジェクト記述と、jQuery を使用したボタンイベントの一括登録

 
ページのトップレベルで定義される変数は、window["変数名"] で参照する事ができます。

ここでは、変数に対して直接 JSON を記述していますが、外部で定義したテキストを jQuery のajax で取得して JSON オブジェクトを使用するともっと自由度の高いイベント登録をする事ができます

▼ JSON 文字列変換例

alert( JSON.parse('{"abc":"こんにちは"}').abc );



<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");

}
</script>
<script>

var event_lst = {
 "target_a" : function() {
	alert(this.id);
	// this はイベントを起こした要素
	console.dir(this);
 },
 "target_b" : function() {
	alert(this.id);
 },
 "target_c" : function() {
	alert(this.id);
 },
 "target_d" : function() {
	alert(this.id);
 },
 "target_e" : function() {
	alert(this.id);
 }
};


$(function(){
	$( ".event_lst" ).each(function(index) {
		// this は参照した DOM
		$( this ).val(this.id);
		// event_lst の function をイベントに登録
		// var event_lst は トップで定義しているので、
		// window["event_lst"] で参照できます
		$( this ).click( window[this.className][this.id] );
	});
});
</script>
<input class="event_lst" type="button" id="target_a"><br>
<input class="event_lst" type="button" id="target_b"><br>
<input class="event_lst" type="button" id="target_c"><br>
<input class="event_lst" type="button" id="target_d"><br>
<input class="event_lst" type="button" id="target_e"><br>

▼ 実際の実行
タグ：jquery
【jQueryの最新記事】
posted by lightbox at 2013-10-17 15:26 | jQuery | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり