第2回クリックの操作 – jQueryによるJavaScript入門-Re:Creator's Kansai （リクリ）

第2回クリックの操作 – jQueryによるJavaScript入門

2008 年 6 月 24 日

西畑一馬

こんにちわ。to-Rの西畑です。

第2回 jQueryによるJavaScript入門はクリックの操作について説明したいと思います。
(ちなみに目次ページ作りました。)

第0回でも解説したとおり、jQueryを利用すれば特定のHTML要素がクリックされた場合の命令を簡単に書くことができます。

まずはサンプルをご覧ください。（to-Rブログの箇所がクリック可能です。）

$(function(){
	$("dt").click(function(){
		$("dd").css("display","block");
	})
})

1行目と5行目の$(function(){　～})はお約束で、3行目の$(“dd”).css(“display”,”block”);は前回説明したCSSの操作になります。

クリックのを制御しているのは2行目と4行目になります。

$("dt").click(function(){
	クリックされた際の命令
})

$(“dt”)はCSSの操作と同じで、CSSセレクタでどの要素がクリックされた際に『クリックされた際の命令』を実行するかを指定しています。

$(“dt”)に続けて書かれている.click(function(){～})にクリックされた際の命令を指定します。

つまり、dt要素がクリックされた際にdd要素のdisplayプロパティをblockに変更するというJavaScriptが記述されています。

これだけですと開きっぱなしですので、閉じる為のクリックを付けておきましょう。

サンプル

$(function(){
	$("dt").click(function(){
		$("dd").css("display","block");
	})
	$(".close a").click(function(){
		$("dd").css("display","none");
		return false;
	})
})

5～8行目が新たに追加した、閉じる為のクリックの記述です。

CSSセレクタでcloseというクラス名が付けられている要素の中にあるa要素がクリックされた際の命令(イベント)を設定しています。

イベントは先ほどと逆でdd要素のdisplayプロパティをnoneに変更しています。

return false;に関してはa要素にclickイベントを設定する際に必要な記述になります。
return false;がないとclickイベントを実行した後にリンク先に移動してしまいます。
それを防ぐ為の記述です。

前回のCSSの操作と今回のclickの操作を利用すれば、かなり色々なことができると思いますので色々と試してみてください。

jQueryによるJavaScript入門　目次

【PR】書籍現場のプロから学ぶXHTML+CSS 好評発売中

タグ：JavaScript | jQuery | クリック

urunao より: 2008 年 6 月 25 日 10:51 AM

“return false;”についての説明がとても参考になりました。
javascriptの勉強をすっ飛ばしてjQueryの研究をしてますので、こういう単純なところで躓いていたのですが、やっと理解することが出来ました。
今後の続きも楽しみにしています。

みのより: 2008 年 6 月 30 日 11:44 AM

とても勉強になります。
もう少し今回の記事を掘り下げた質問をさせてください。

dt要素だけで開閉のトリガーにするためにはどうしたら良いのでしょうか？

今回の西畑さんのサンプルでは
dt要素をクリックすることで、dd要素のdisplayプロパティがblockなりますが、
再度dt要素がクリックすることでdd要素をdisplay noneにするにはどういう記述になるのでしょうか。

西畑一馬より: 2008 年 7 月 1 日 2:03 PM

>urunaoさん

ありがとうございます。がんばります＞＜

>みのさん

本講座で登場するのはもう少し後半ですがtoggleという関数を利用すれば簡単に実現できます。

サンプルを用意しましたのでリファレンスとあわせて見てみてください。(解説は後日の講座で)

サンプル
http://blog.webcreativepark.net/sample/jQuery/sample13.html
リファレンス
http://semooh.jp/jquery/api/events/toggle/fn1%2C+fn2%2C+…%2C+fnN/

みのより: 2008 年 7 月 2 日 12:00 AM

西畑さん

なるほど、サンプルのソースとリファレンスを拝見させていただいて疑問が解けました。
ご丁寧にありがとうございます。

これからもto-Rと共に更新を楽しみにしていますッ＞＜

Re:Creator’s Kansai