以前以下の記事にてテーブルの行タグである <tr> にカスタム属性を付加することを行いました。
⇒JavaScript jQueryで table の操作する方法その４・データ行の追加と削除
今回は、別のタグにカスタム属性を追加する例を記したいと思います。
■このページの内容
■カスタム属性の付け方
以下の例では button タグに data-index と名前を付けたカスタム属性を付加しています。
<button name="button1" type="button" data-index="1" >ボタン</button>
カスタム属性のタグ名は data- の後に任意で小文字の英数文字で指定します。 文字列の中にハイフンを入れても良いようです。
このカスタム属性を参照するには jquery では data() または attr() 関数を使います。 以下の様な感じです。
var index1 = $("button[name=button1]").data("index"); //data()の場合は"data-"を省略
var index2 = $("button[name=button1]").attr("data-index");
■カスタム属性の簡単な例
以下の例は button を2個設置し、最初の button にカスタム属性「data-index」を設定します。 さらに、2番目の button のクリックイベントで最初の button のカスタム属性を取得し、表示しています。
<html>
<head>
<meta charset="utf-8">
<title>Custom Tag attribute - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<h2>Custom Tag attribute - 1</h2>
<button name="button1" type="button" data-index="10" >ボタン1</button>
<button name="button2" type="button" onclick="getCustomTag();false;" >ボタン2</button>
</body>
<script type="text/javascript">
function getCustomTag() {
//[button1]の[data-index]の取得
var index1 = $("button[name=button1]").attr("data-index");
var index2 = $("button[name=button1]").data("index");
//表示(同じ値が表示される)
alert("data-index:" + index1 + " , " + index2);
}
</script>
</html>
■複数の button タグのクリックイベントでのカスタム属性の取得の例
以下の例では button を4個設置し、各ボタンのイベント処理で、自分自身のカスタム属性の値を取得する例を示します。
<html>
<head>
<meta charset="utf-8">
<title>Custom Tag attribute - 2</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<h2>Custom Tag attribute - 2</h2>
<button name="button-attr" type="button" data-index="1" >ボタン1</button>
<button name="button-attr" type="button" data-index="2" >ボタン2</button>
<button name="button-attr" type="button" data-index="3" >ボタン3</button>
<button name="button-attr" type="button" data-index="4" >ボタン4</button>
</body>
<script type="text/javascript">
//ページが読込まれた直後に実行
$(document).ready(function() {
//name属性が"button-attr"のクリックイベント設定
$(document).on("click","button[name=button-attr]",function() {
//[data-index]の取得
var index = $(this).attr("data-index");
alert("data-index:" + index);
return false;
});
});
</script>
</html>
■1個のタグに複数のカスタム属性を宣言した例
以下では1個の button タグの中に複数のカスタム属性を宣言した例を示します。
実際問題として、1個のタグに各種の情報を持ちたい場合は想定されるので、やってみました。
「data-d1」「data-d2」としたカスタム属性を宣言しています。 各ボタンをクリックした時に3個のカスタム属性を取得し表示しています。
<html>
<head>
<meta charset="utf-8">
<title>Custom Tag attribute - 3</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<h2>Custom Tag attribute - 3</h2>
<button name="button-attr" type="button" data-index="1" data-d1="001" data-d2="101">ボタン1</button>
<button name="button-attr" type="button" data-index="2" data-d1="002" data-d2="102">ボタン2</button>
<button name="button-attr" type="button" data-index="3" data-d1="003" data-d2="103">ボタン3</button>
<button name="button-attr" type="button" data-index="4" data-d1="004" data-d2="104">ボタン4</button>
</body>
<script type="text/javascript">
//ページが読込まれた直後に実行
$(document).ready(function() {
//name属性が"button-attr"のクリックイベント設定
$(document).on("click","button[name=button-attr]",function() {
//[data-index]の取得
var index = $(this).attr("data-index");
var d1 = $(this).attr("data-d1");
var d2 = $(this).attr("data-d2");
alert("data-index:" + index + " data-d1:" + d1 + " data-d2:" + d2);
return false;
});
});
</script>
</html>
関連する記事
⇒JavaScript 何に使う⇒JavaScript jQueryの使い方（セレクタ）
⇒JavaScript jQueryの使い方（セレクタ）その２
⇒JavaScript jQueryの使い方（セレクタ）その３・セレクタの存在確認
⇒JavaScript jQueryの使い方（セレクタ）その４・複数セレクタの存在確認
⇒JavaScript jQueryでJavascriptファイルを動的に変更する方法
PR
コメント