@ PHP

click()

click()は、特定の要素がクリックされたときになんらかの処理を実行するメソッドです。

click()の基本の書き方

click()は、括弧内に function(){…} と記述し、その内側に実行したい処理を記述します。

$("セレクタ").click(function(){
  セレクタで指定した要素がクリックされた時に実行する処理
});

click_01.html は、button 要素がクリックされると img 要素の src 属性の値を「images/sea.jpg」に、alt 属性の値を「海」に書き換えるスクリプトです。attr() は ,(カンマ)区切りで指定した属性値を変更する命令です。サンプルでは、複数の命令を .(ドット)でつないで連続して実行するメソッドチェーンを使って、src 属性と alt 属性を一度に書き換えています。

click_01.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <button>画像を変更</button>
  <p><img src="images/flower.jpg" alt="花"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
  $("button").click(function(){
    $("img").attr("src","images/sea.jpg").attr("alt","海")
  })
});
</script>
</body>

</html>

demo

click() はセレクタで任意の要素を指定できますが、もともと「クリックされると href 属性に書かれたリンク先に移動する」働きがある a 要素を指定した場合、a 要素をクリックすると click イベントが発生し、jQuery の命令が実行されます。ところが次の瞬間に Web ブラウザーは、a 要素の href 属性に設定されたリンク先の URL をひらいてしまいます。

この問題を回避する方法はいくつかあります。

javascript:void(0) を使う

1つは、a 要素の href 属性に JavaScript:void(0) と設定し、a 要素の機能を無効化する方法です。

click_02.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <a href="javascript:void(0)">画像を変更</a>
  <p><img src="images/flower.jpg" alt="花"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
  $("a").click(function(){
    $("img").attr("src","images/sea.jpg").attr("alt","海")
  })
});
</script>
</body>

</html>

demo

return false; を追加する

もう1つは、click イベントの最後に return false; と記述する方法です。

click_03.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
lt;/head>

<body>
  <a href="images/sea.jpg">画像を変更</a>
  <p><img src="images/flower.jpg" alt="花"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
  $("a").click(function(){
    $("img").attr("src","images/sea.jpg").attr("alt","海");
    return false;
  })
});
</script>
</body>

</html>

demo

イベントが発生した要素を取得する

イベントを設定したい要素は1つとは限りません。

click_04.html は、eq フィルターを使って複数の要素に対してそれぞれの異なるクリックイベントを設定しています。

click_04.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <ul>
    <li><a href="images/flower.jpg">花</a></li>
    <li><a href="images/sea.jpg">海</a></li>
    <li><a href="images/jellyfish.jpg">くらげ</a></li>
    <li><a href="images/building.jpg">建物</a></li>
  </ul>
  <p><img src="images/flower.jpg" alt="花"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
  $("a:eq(0)").click(function(){
    $("img").attr("src","images/flower.jpg").attr("alt","花");
    return false;
  });
  $("a:eq(1)").click(function(){
    $("img").attr("src","images/sea.jpg").attr("alt","海");
    return false;
  });
  $("a:eq(2)").click(function(){
    $("img").attr("src","images/jellyfish.jpg").attr("alt","くらげ");
    return false;
  });
  $("a:eq(3)").click(function(){
    $("img").attr("src","images/building.jpg").attr("alt","建物");
    return false;
  })
});
</script>
</body>

</html>

demo

$(this) セレクタを使う

click_05.html では、コードがかなり長い上に、後で変更をする場合に手数がかかります。

そこで、イベントが発生した要素を取得するセレクタ $(this) を使います。

イベントを設定している click(function(){…}) 内で $(this) と書くと、イベントが発生した要素を取得できます。

click_05.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>sample</title>
</head>

<body>
  <ul>
    <li><a href="images/flower.jpg">花</a></li>
    <li><a href="images/sea.jpg">海</a></li>
    <li><a href="images/jellyfish.jpg">くらげ</a></li>
    <li><a href="images/building.jpg">建物</a></li>
  </ul>
  <p><img src="images/flower.jpg" alt="花"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
  $("a").click(function(){
    $("img").attr("src",$(this).attr("href")).attr("alt",$(this).text())
    return false;
  });
});
</script>
</body>

</html>

スクリプトの流れ

クリックされた要素の href 属性を $(this).attr(“href”) で、クリックされた要素内のテキストを $(this).text で取得し、img 要素の src 属性にそれぞれ設定します。$(this) を使うとイベントが発生した要素を取得できます。

demo