ウェブ

jQueryのclick()イベント処理の使い方を解説【ボタンをクリックして色を変更する】

クリックイベント

マウスのクリック操作でイベントを実行することができるclick()についての解説になります。

▪.click()実装例⇩

⇧ボタン「グリーン」「パーブル」「ブルー」「グレー」をクリックorタップをする事でボックスの色が変更されます。

click()の使い方

▪CDN版 :https://cdnjs.com/libraries/jquery

jQueryをCDNで読み込む必要があるので、</body>の直上に下記の記述をします。

<!-- jquery.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

.click()は、jQueryのメソッドでクリックorタップ操作で実行され、書き方は下記の通りになります。

$('セレクタ').click(function(){
  // ここにクリックしたら実行する処理を記述する
});

click()の実装例

▪HTML⇩

<!-- 色が変わるボックス -->
<div class="bgbox"></div>
<!-- 実行するボタン -->
<input type="button" class="bgbtn1" value="グリーン">
<input type="button" class="bgbtn2" value="ブルー">

▪JS⇩

$(".bgbtn1").click(function() {
  $(".bgbox").css("background-color","#a9cc51"); //グリーン
});
$(".bgbtn2").click(function() {
  $(".bgbox").css("background-color","#0078ba"); //ブルー
});

サンプルで色が変更されるboxクラス名bgboxを作り、clickできるbuttonを作り、jQueryでボタンがクリックされたら背景色を変える記述をして実行しています。

See the Pen 【簡易的】click()イベント処理色変更 by pull-design (@design90806871) on CodePen.

文字色を変更する

文字色変更は上で実装したbackground-colorcolorに変更することで実行できます。

See the Pen click()イベント処理文字色変更 by pull-design (@design90806871) on CodePen.

まとめ

jQueryの応用編としてハンバーガーメニューやスライダーなども実装可能となっています。

▪ハンバーガーメニュー⇩

ハンバーガーメニューでメニュー外をクリックした際も閉じるを実行するナビゲーションの作り方
ハンバーガーメニューでメニュー外をクリックした際も閉じるを実行するナビゲーションの作り方【JavaScript】端末の幅が狭い場合にハンバーガーメニューを表示しますが、PC版のサイトでもナビゲーションメニューが入りきらなかった時にも使用します。メニューは白背景の部分でグレーにの箇所をクリックorタップでメニューが閉じる動作になります。...

▪スライダー⇩

【ズーム機能を追加】Slick/全画面でふわっと切り替えスライドショー
【ズーム機能を追加】Slick/全画面でふわっと切り替えスライドショーズーム機能を追加したSlick/全画面でふわっと切り替えスライドショーをコピペで実装する...