jQueryの中でもよく使われるイベントの1つに「click()」があります。click()は、ある要素がクリックされたら何かしらの処理を実行するという命令になります。ちなみに、イベントとはプログラムが実行されるタイミングのことを言います。それでは、基本的なclickイベントの動き方を見ていきましょう。

クリックで画像を切り替える処理

clickイベントの処理でよくあるのが画像の切り替え処理です。ここでは、a要素がクリックされたら画像を切り替えるという命令を作ってみます。

$(function(){
  $("a").click(function(){
    $("img").attr("src","photo1.jpg");
    return false;
  });
});

簡単に言うと、a要素がクリックされたらimg要素のsrc属性の値を「photo1.jpg」に切り替えるという命令をしています。attr()は、属性値の取得・変更をする際に用いられます。この場合、src属性の属性値を「photo1.jpg」に変更するという処理になります。
「return false;」というのは、jQueryの命令だけ実行するようにするために指定しています。具体的には、a要素は通常、href属性に指定してある箇所へ移動する働きあるセレクタです。
そのため、a要素を使ってclickイベントを実行すると、スクリプト側で指定した命令が実行されると同時に、href属性で指定したリンク先に移動するという動きをしてしまいます。単純に画像を切り替えたいだけなので、リンク先への遷移を回避するために「return false;」を記述するのです。

画像にはalt属性を付けるのが普通だと思います。先程の命令文は単に画像を切り替える処理だったので、そこにalt属性を差し替える処理も追加してみます。

$(function(){
  $("a").click(function(){
    $("img").attr("src","photo1.jpg").attr("alt","photo1");
    return false;
  });
});

画像と同様にattr()を使ってaltを差し替えるだけです。ちなみに上記の書き方はメソッドチェーンと呼ばれる書き方で、1つのセレクタに対して2つ以上の命令を実行したいときに用いられます。命令と命令はドットで繋げて記述します。この場合は、img要素に対して画像とaltを差し替えるという2つの命令を実行させています。

複数の要素にイベントを設定

イベントは複数の要素に対しても設定することができます。それにより、先程は1枚の画像を切り替えましたが、複数の画像を切り替えることもできるようになります。

$(function(){
  $("a").click(function(){
    $("img").attr("src",$(this).attr("href"));
    return false;
  });
});

「$(this)」を使ってクリックされた要素のhref属性の値を取得しています。1つ1つの要素に対して違うイベントを設定して切り替えることも可能ですが、あまりに数が多すぎるとソースも長くなってしまうので、「$(this)」を使うことでソースも短く済みます。
「$(this)」はイベントが発生した要素を取得する際に使用するものです。

以上がclickイベントの簡単な動かし方となります。

おすすめの記事