【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');