jQueryで特定のdata属性をセレクタとして指定する方法
jQueryで特定のdata属性をクリックした際に何らかのイベントを実行したかった。いつもであれば当該要素のに対してidやclassを付与し、それらをセレクタとして指定するがASPを利用したサイトでそのような方法が取れなかった。そのため今回はdata属性自体をセレクタとして指定したい。以下に対応方法をメモ。
対応方法
ソースコード
<div data-id="1">ID:1</div> <div data-id="2">ID:2</div> <div data-id="3">ID:3</div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script> $(function(){ $(`[data-id]`).on(`click`, function(){ console.log($(this).data(`id`)); }); }); </script>
data-id属性をクリックした際にdata-idの値をコンソールログに出力するという内容になる。
尚、data-id属性の内容が1のものを指定したいような場合は以下のような形になる。
$(`[data-id="1"]`).hide();
参考サイト
関連記事
-
-
Ajaxを使用する際の注意
Ajaxで特にJSONPを使う際によくミスることがあるので 注意点をまとめておく ...
-
-
Javascript / jQueryにて特定の要素内の文字数が〇文字以上の場合に丸める方法
サイトの特定の要素内の文字数が〇文字以上の場合に「コンテンツコンテ……」のように ...
-
-
jQueryでチェックボックスの全チェック&チェック解除する方法
フォームのチェックボックスで「全てにチェックを入れる」「全てのチェックを外す」と ...
-
-
Ajaxでプラグイン無しのファイルアップロード方法
画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...
-
-
jQueryとCSSで指定したテキストに対してラインマーカーを引く方法
サイト内で強調したいテキストに対して蛍光ペンでマーカーを引くようなアニメーション ...