感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQueryで要素を出したり閉じたりする(表示と非表示を演出する)

<スポンサーリンク>

ボタンや画像をクリックしたら説明文を出したり、何か違う画像を出したいときがある。
そういうアニメーションを演出するには、jQueryのshow()メソッドやhide()メソッドを使えばいい。

(1)ボタン(またはボタンとなる画像)を設置
(2)そこで開く要素を探しだす
(3)実際に要素を出したり隠したりする

という処理を記述すれば、「jQueryで要素を表示したり隠したり」させることができる。

以下のサンプルは、画像クリックで説明文を表示させるサンプルである。
画像のリンクを適当に貼れば、画像クリックで説明文が出てくる。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>要素を出したり隠したりする(表示/非表示)</title>
<link rel="stylesheet" type="text/css" href="./styles/core.css">
<link rel="stylesheet" type="text/css" href="./styles/module.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$('div.caption img').click(function(){
		var body$ = $(this).closest('div.module').find('div.body');
		if (body$.is(':hidden')) {
			body$.show();
		} else {
			body$.hide();
		}
	});
});

</script>
</head>
<body>
<div class="module">
  <div class="caption">
  	<span>クリックで説明文を出します</span></br>
  	<img src="img/bijyo.jpg" width="150" height="150" alt="美女" title="美女の写真です"/>
  </div>
  <div class="body">
  	これは私が選んだ美女の写真です。
  	この美女を見ていると、私はいつも幸せな気分になれます。
  	しかし悲しいかな。この美女は私とは無縁の美女です。
  </div>
</div>
</body>
</html>

読んだ本

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

感謝のプログラミング

今回で感謝のプログラミングは【634時間目】
10000時間まで、あと【9366時間】