SQLの窓

2014年07月02日


jQuery でボタンを作成して、this でボタンのカスタム属性を参照する方法のバリエーション

DOM でなにもかも実装しようとすると、とても時間コストがかかりすぎます。jQuery を使用すると、それを大幅に削減できますが、だからと言って DOM の仕様を無視する、または覚えないのは問題があります。

全て jQuery で書いたほうが説明は簡単ですが、少なくとも data-* 属性ではどちらも理解して使えるようにしておいたほうがいいと思います。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">

$(function(){

	// ボタン
	$("#button_control")
		.attr({
			"type": "button",
			"data-my-data": "カスタム属性"
		})
		.val("ボタン")
		.css({
			"font-size": "20px",
			"background-color": "orange",
			"font-weight": "bold",
			"border-radius": "10px"
		})
		.click(function(){
			console.log("ボタンがクリックされました");

			// 以下の4つは全て my_button を表示します
			console.log( this.name );
			console.log( $(this)[0].name );
			console.log( $(this).prop("name") );
			console.log( $(this).attr("name") );

			// 以下の4つは全て カスタム属性 を表示します
			console.log( $(this).data("my-data") );
			console.log( $(this).attr("data-my-data") );
			console.log( this.dataset.myData );
			console.log( $(this)[0].dataset.myData );

			// 以下の4つは全て 新しい属性 を表示します
			console.log( $(this).data("your-data") );
			console.log( $(this).attr("data-your-data") );
			console.log( this.dataset.yourData );
			console.log( $(this)[0].dataset.yourData );
		});

});

</script>

<input
	id="button_control"
	name="my_button"
	data-your-data="新しい属性">
click イベントの中で参照される this は DOM です。


【jQueryの最新記事】
posted by lightbox at 2014-07-02 23:50 | jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり