もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第5回 難しくなる前にFirebugの活用を学ぶ

この記事を読むのに必要な時間:およそ 3 分

gihyo.jp内の要素を表示・非表示

今回のサンプルはこのままFirebugのコンソールを使って実際にコードを書いてみましょう。

では今回は,gihyo.jp内の要素を使って,どれかの要素をクリックしたら,別な要素を表示・非表示を繰り返しできるようなものを作ってみましょう。

まずは,クリックする要素を決めます。Firebugの左上の左から2番目のボタンで表示上からよさそうなところを探します。今回は「h2」の要素部分をクリックする要素としましょう。

画像

そしてh2要素をクリックしたら,そのh2が含まれているブロック内の他の要素を非表示にするというコードにしてみます。

FirebugでHTMLをチェックしたところ,h2の含まれるブロック内の他の要素を選択する方法は,h2の兄弟にあたる要素(同階層の要素)を選択して,それを非表示にすることで実現できそうです。早速jQuerifyをgihyo.jpのサイトで利用し,コードをFirebugのコンソールに書いてみましょう。

書いたコード

h2をクリックすると兄弟要素が表示・非表示になるスクリプト

$jq('h2').each(function(){
    $jq(this).click(function(){
        $jq(this).siblings().toggle();
    });
});

書いたコードを実行する前に,今回使ったメソッドの解説をしておきます。

siblings()

siblingsメソッドは要素の兄弟要素を取得して返すメソッドです。

siblings() - HTML

<ul>
    <li>A要素の兄弟要素</li>
    <li>A要素の兄弟要素</li>
    <li class="brother">consoleにA要素の兄弟要素を表示します</li>
    <li>A要素の兄弟要素</li>
</ul>

siblings() - JS

$(function(){
    console.log($('.brother').siblings());
});

toggle()

toggleメソッドは要素が非表示の場合はそれを表示させ,要素が表示の場合はそれを非表示にするメソッドで,hide()とshow()をあわせたような機能です。表示と非表示を繰り返すような箇所での使用に便利です。

toggle() - HTML

<dl id="sample2">
    <dt>ここをクリック</dt>
    <dd>ここの表示非表示が切り替わる</dd>
</dl>

toggle() - JS

$(function(){
    $('dt','#sample2').click(function(){
        $(this).next().toggle();
    });
});

書いたコードを実行

それでは,今回書いたコードを実行してみましょう。実際にFirebugのコンソールに書いて,実行をしてみてください。下の画像のように,h2要素にクリックイベントが付されます。

動作させた結果

動作させた結果

h2要素をクリックしてみる

実際に動作をするかチェックしてみましょう。最初はh2の兄弟要素は表示されているので,h2を最初にクリックすると,兄弟要素が非表示になります。

h2をクリックした結果

h2をクリックした結果

いかがでしたでしょうか?きちんと動いたでしょうか?エラーが出た場合は,書き直してみてください。再度実行してみてもコンソールが何も反応しない場合は,一度ページをリロード(更新)してみてから,再度jQuerifyと,書いたコードを実行してみてください。

Firebug活用のススメ

今回はFirebugを使ってみることに重点をおいて説明をしたのですが,ここで紹介したのは本の一例です。他にも,うまく動作がしなくなる前に,console.log()を使って,入っている変数の中身を表示させて意図どおりの変数が入っているかを確認するなどにも使えます。まだまだ活用方法はあるので,それは次回以降も随時jQueryの解説とともに入れていきたいと思います。

これまでの第4回までの内容と今回の内容を合わせて,まだ試してみてない人などは,ぜひFirebugも使いつつ復習を兼ねて実際にコードを書いてみてください。

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/