勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryで特定のdata属性をセレクタとして指定する方法

  jQuery JavaScript

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();

 

参考サイト

https://kinocolog.com/jquery_data/

 - jQuery JavaScript

  関連記事

jQueryでiframe内の要素を呼び出し

jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...

画像の登録フォームにてjQueryプラグイン(piCEdit)を用いてWebカメラの映像を撮影させる方法

form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...

jQuery UIを使って簡単にダイアログを表示させる方法

ブラウザ上でユーザーに対してちょっとした確認を行いたい場合はJavaScript ...

jQueryにて複数のajax処理のレスポンスをまとめて表示する方法

同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...

Lightboxで画像拡大時に閉じるボタンの位置を右上に変更

Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...