ウェブ

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の応用編としてハンバーガーメニューやスライダーなども実装可能となっています。

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

▪スライダー⇩

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


上にスクロール 下にスクロール