クリックしたら実行する | jQuery Complete Guide

「クリックしたら実行する」を書いてみましょう。

Contents

1 クリックしたら実行するスクリプトを書く！
2 this を使ってみる

クリックしたら実行するスクリプトを書く！

<!doctype html>
<html lang="jp">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>jQuery</title>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
    crossorigin="anonymous"></script>
  <script>
    $(function () {
      $("#btn").click(function () {
        $(".text").css("color", "red");
      });
    });
  </script>
</head>

<body>
  <button id="btn">jQuery</button>
  <p class="text">jQuery</p>
  <p class="text">はじめまして</p>
  <p class="text">よろしくおねがいします</p>
</body>

</html>

このように書きます。
clickのほかにも「きっかけ」にできるものがあります。

$("#btn").click(function () {
 //クリックしたら実行
});

$("#btn").hover(function () {
 //ホバーしたら実行
});

$("#btn").touchstart(function () {
 //タッチを開始したら実行(スマホ向け)
});

その他の「トリガー」については他の記事で紹介しますね！

this を使ってみる

クリックイベント内でclassを利用すると全部が反応してしまって困ることがあります。
そんなときは$(this)を利用してみましょう。クリックした要素を起点に指定ができるので便利です。

ダメな例↓

<!doctype html>
<html lang="jp">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>jQuery</title>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
    crossorigin="anonymous"></script>
  <script>
    $(function () {
      $(".list-item").click(function () {
        $(".list-item").children("p").slideToggle();
      });
    });
  </script>
  <style>
    .list-item p {
      display: none;
    }
  </style>
</head>

<body>
  <ul class="list">
    <li class="list-item">
      クリック！
      <p>テキスト</p>
    </li>
    <li class="list-item">
      クリック！
      <p>テキスト</p>
    </li>
    <li class="list-item">
      クリック！
      <p>テキスト</p>
    </li>
  </ul>
</body>

</html>

thisを利用した場合

<!doctype html>
<html lang="jp">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>jQuery</title>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
    crossorigin="anonymous"></script>
  <script>
    $(function () {
      $(".list-item").click(function () {
        $(this).children("p").slideToggle();
        //clickしたものを指す
      });
    });
  </script>
  <style>
    .list-item p {
      display: none;
    }
  </style>
</head>

<body>
  <ul class="list">
    <li class="list-item">
      クリック！
      <p>テキスト</p>
    </li>
    <li class="list-item">
      クリック！
      <p>テキスト</p>
    </li>
    <li class="list-item">
      クリック！
      <p>テキスト</p>
    </li>
  </ul>
</body>

</html>