初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

jQuery イベント 2

昨日に引き続きイベントについて記述していきます。

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

昨日ブログに書きましたclick()イベントも盛り込んでます。

新たにeq()セレクターを使います。

eqセレクターは特定の要素のうち、指定した順番の要素を取得するセレクターです。配列と同様に0から数え,上から順に数字が割り当てられます。。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントが発生した要素を取得する</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
	$( 'a:eq(0)' ).click(function(){
		$( 'img' ).attr( 'src', 'img/panda.png' ).attr( 'alt', 'パンダ' );
	return false;
	});
	$( 'a:eq(1)' ).click(function(){
		$( 'img' ).attr( 'src', 'img/koala.png' ).attr( 'alt', 'コアラ' );
	return false;
	});
$( 'a:eq(2)' ).click(function(){
		$( 'img' ).attr( 'src', 'img/squirrel.png' ).attr( 'alt', 'リス' );
	return false;
	});
	$( 'a:eq(3)' ).click(function(){
		$( 'img' ).attr( 'src', 'img/greathornedowl.png' ).attr( 'alt', 'ミミズク' );
	return false;
	});
});
</script>
</head>
<body>
<ul>
  <li><a href="img/panda.png">パンダ</a></li>
  <li><a href="img/koala.png">コアラ</a></li>
  <li><a href="img/squirrel.png">リス</a></li>
  <li><a href="img/greathornedowl.png">ミミズク</a></li>
</ul>
<p><img src="img/panda.png" alt="パンダ"></p>
</body>
</html>

《実行結果》

f:id:bellsmarket:20150303004027p:plainf:id:bellsmarket:20150303004035p:plain

f:id:bellsmarket:20150303004032p:plainf:id:bellsmarket:20150303004029p:plain

いつも通り記述を訳していきます。

HTMLからですが、まずパンダの画像を表示しています。更にアンカーリンクにてそれぞれの画像をリンクしています。

次にscriptですが、各々のa要素をeq()セレクターによって取得することでid属性やclass属性を割り当てなくても

個別にclick()イベントを実行することが出来ます。クリックされるとattr()メソッドにて'src','alt'の属性値が変更される仕組みです。

また【return false;】を記述することでa要素をクリックしてもリンクに飛ぶことなく、そのページにて画像が入れ替わります


$(this)

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

<script>
$(function(){
	$( 'a ').click(function(){
		$( 'img' ).attr( 'src', $(this).attr( 'href' )).attr( 'alt', $(this).text() );
		return false;
	});
});
</script> 

実行すると動き自体は先ほどと変わりませんが、$(this)を使うことによって、記述が複雑ではなく、短くなりシンプルになります。script要素内を書き換えてみましょう

要約すると、a要素をクリックすると押されたa要素自身が持っているhref属性がsrc属性に書き換えられます。(attr()メソッドで取得)

更に、alt属性にtext()メソッドで取得した内容が書き換えられます。

topへ戻る