【attrメソッドとは】
attr
は英語で attribute(アトリビュート)の略で、HTML要素の属性(attribute)の値を取得したり設定するために使われる。
【実際のコード】
$('button[name="member_btn"]').on('click', function (event) {
var btn_values = $(this).attr('value').split(',');
facility_id = btn_values[0];
member_id = btn_values[1];
member_name = btn_values[2];
enter_leave_status = btn_values[3];
【解説】
クリックされたボタンの `value` 属性を取得し、その文字列をコンマで分割して配列 `btn_values` に格納している。`value` 属性は通常、フォーム要素(<input>タグや<button>タグなど)に情報を保存するために使用され、この場合は施設ID、メンバーID、メンバー名、入退室ステータスなどの情報を含む文字列が格納されている。
この配列をキーで指定して各変数に入れてその後のコードで使っている。
【attrメソッドの基本的な使用法】
①値を取得する
$(selector).attr(attributeName)の形式で使用すると、選択した要素の指定した属性の値を取得できる。
返されるのは、最初の要素の属性値です。
var typeValue = $('input').attr('type');
②値を設定する
属性を設定する場合、.attr()
メソッドには2つの引数を渡します。最初の引数は属性名、二番目の引数はその属性に設定したい値です。
HTML要素の 'id' 属性を 'newId' に設定する例
$('#myElement').attr('id', 'newId');
③複数の属性を一度に設定する
.attr()
メソッドを使って複数の属性を一度に設定することも可能です。この場合、オブジェクトを引数として渡し、プロパティ名が属性名、プロパティの値がその属性の値となります。
HTML要素に複数の属性を一度に設定する例
$('#myElement').attr({ 'id': 'newId', 'class': 'newClass' });
④属性を削除する
属性を完全に削除するには、.removeAttr()
メソッドを使用します。これにより、指定した属性が要素から完全に除去されます。
'id' 属性を削除する例
$('#myElement').removeAttr('id');