jQuery - 要素のクリックイベント
公開日：2018-12-12
更新日：2019-05-14
更新日：2019-05-14
1. 概要
要素がクリックされた時に、処理を実行します。
function の中では、$(this) で、クリックされた要素が参照できます。
$(セレクタ).on("click", function(){ 処理 });
function の中では、$(this) で、クリックされた要素が参照できます。
2. サンプル
文字をクリックをすると、文字の色が赤くなります。
リセットボタンを押すと、元の色に戻ります。
リセットボタンを押すと、元の色に戻ります。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<div id="a">
<div id="a1">この文字列をクリックすると赤くなります。</div>
<div id="a2">この文字列をクリックすると赤くなります。</div>
</div>
<br />
<input type="button" id="reset" value="リセット" />
<!-- Script -->
<script>
$(function() {
//複数の div の click イベントに処理を登録します
$("#a div").on("click", function(){ $(this).css("color", "red"); });
//1つずつ登録することもできます
//$("#a1").on("click", function(){ $(this).css("color", "red"); });
//$("#a2").on("click", function(){ $(this).css("color", "red"); });
$("#reset").on("click", function(){ $("div").css("color", ""); });
});
</script>
</body></html>
実行結果：画面
