Help us understand the problem. What is going on with this article?

【jQuery】クリックした要素を取得して属性値を画面に表示するコードと実装手順

クリックした要素を取得して属性値を画面に表示

画面1.png
「one」「two」「three」の3つボタンがあって。

画面2.png
クリックしたボタンの属性「data-id」に設定した値をテキストで表示する。

画面3.png
他のボタンを押したらテキストが変わる。

コード

index.html
<!doctype html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <title>test</title>
</head>
<body>
    <div>
        <button class='button' data-id='one'>ONE</button>
        <button class='button' data-id='two'>TWO</button>
        <button class='button' data-id='three'>THREE</button>
    </div>

    <p id='selected'>選択してください</p>

    <script type="text/javascript">
        $('.button').on('click', function(){
            var click =  $(this).data('id');

            $('#selected').text(click);
        });
    </script>
</body>
</html>

手順

1.取得したい要素に属性「data-id」を設定

index.html
<button class='button' data-id='one'>ONE</button>

属性「data-id」を記述することで、jQueryでは.data('id')で取得できる。
その他にも「data-name」「data-value」も使える。
今回は、data-id='one'とすることでテキストに「one」を表示する。

2.ボタンクリックで処理を実行

practice.js
$('.button').on('click', function(){
    // ここに処理を記述
});

3.$(this)でクリックされた要素を取得

practice.js
var click =  $(this).data('id');

$(this).data('id')でクリックされたdata-idの値を$clickに入れる。

4.text()で表示内容を変更

practice.js
$('#selected').text(click);

<p id='selected'>選択してください</p>
上記の要素を書き換えるため、$('#selected')で要素を取得。
text()を使い、$clickの値で書き換える。

参考

jQueryのdata()で属性を取得・設定・変更する方法まとめ!
https://www.sejuku.net/blog/38263

jQueryのtext()によるテキスト操作まとめ!
https://www.sejuku.net/blog/40700

【初心者向け】jQueryとは?jQueryの基本的な使い方まとめ
https://handywebdesign.net/2017/09/jquery-for-beginner/

wallkickers
学んだことを形にするのが好きなWebエンジニアです。前職は広告を売ったり、企業の情報発信をお手伝いしたりしていました。「あったら便利だな」をプログラミングで作っています。
https://note.mu/takafumi_178
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした