［jQuery］クリックイベント

クリックイベント　click()

　$（’セレクター’）.click（ function ( ) {
　　　セレクターで指定した要素がクリックされたときに実行する処理内容
　}

☆属性に含まれるものを　．（ドット）でつなげられる。

この方法では、画像のalt属性を変更できるのが特徴。JavaScriptの画像置換ではalt属性までは変更できない。

ａｔｔｒ（）：attribute（属性）の省略形

【演習１】ボタンを押すと画像が変わる仕組み

<button>画像を変更</button>
<p class="flower"><img src="img/flower.jpg" alt="花"></p>
ーーーーーーーーーーーーーーーーーー

$( document ).ready ( function( ) {
 $( 'button' ).click( function( ) {
     $( 'img' ).attr ( 'src', 'img/sea.jpg' ) .attr ( 'alt' , '海' );
     } ) ;
} ) ;
ーーーーーーーーーーーーーーーーーー

<style>
button {
  cursor: pointer;
  }
</style>

※ ボタンにカーソルを置いたときにポインターに変更している

【演習２】ボタンを押すと画像２つとも変わる仕組み

　　　　　　↓　↓　↓　実行後

☆画像それぞれにclass（又はid）をふるのがポイント

$(document).ready(function() {
 $('button').click( function() {
     $('p.flower img').attr('src', 'img/sea.jpg') .attr('alt','海');
     $('p.kurage img').attr('src', 'img/building.jpg') .attr('alt','ビル');
     });
});

<button>画像を変更</button>
<p class="flower"><img src="img/flower.jpg" alt="花"></p>
<p class="kurage"><img src="img/jellyfish.jpg" alt="海月"></p>

<style>
button {
  cursor: pointer;
  }
</style>

※＄（’セレクター’）は$('p.flower img')と、親子セレクターを使う。jQueryでは厳密に指定する事

【演習３】リンクをクリックすると下の画像が置き換わる仕組み

☆ａ要素をクリックした瞬間に、ページが変わって画像が表示されてしまうので
　その回避をどうするかがポイント

方法⑴　a要素のhref属性に「javascript: void(0)」と設定　⇒a要素の機能が無効になる
方法⑵推奨　clickイベントの最後に「return false ; 」を追加する
　　　　⇒jQueryの命令だけが実行され、href属性のリンク先には移動しない。

<ul>
    <li><a href="img/flower.jpg">花</a></li>
    <li><a href="img/sea.jpg">海</a></li>
    <li><a href="img/jellyfish.jpg">くらげ</a></li>
    <li><a href="img/building.jpg">建物</a></li>
    </ul>
    <p><img src="img/flower.jpg" alt="花"></p>

<script>
$(document).ready( function() {
  $('a:eq(0)').click(function() {
   $('img').attr('src','img/flower.jpg').attr('alt','花');
    return false;
      });
  $('a:eq(1)').click (function() {
   $('img').attr('src','img/sea.jpg').attr('alt','海');
    return false;
  });
  $('a:eq(2)').click (function() {
   $('img').attr('src','img/jellyfish.jpg').attr('alt','くらげ');
    return false;
  });
  $('a:eq(3)').click (function() {
   $('img').attr('src','img/building.jpg').attr('alt','建物');
   return false;
  });
});
</script>