クリックした要素を取得して属性値を画面に表示
「one」「two」「three」の3つボタンがあって。
クリックしたボタンの属性「data-id」に設定した値をテキストで表示する。
他のボタンを押したらテキストが変わる。
コード
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/