アナログCPU:5108843109

ゲームと音楽とプログラミング(酒と女とロックンロールのノリで)

('ω') < 転職した

jQuery入門 #2:classとid

※「jQuery入門する人向け記事」じゃなくて「自分がjQuery入門してみた記事」です

前回作った「コンテンツの開閉スクリプト」と「div自体をリンクにするスクリプト」ですが、
これは汎用的に使えそうですね。
jQuery入門 #1:導入方法と簡単なスクリプト作成 - アナログCPU:5108843109

なので、idを明確に指定して作るのはよろしくない気がします。

idはその名前通り(というかプログラマが「ID」と聞いて想像する通り?)
そのページでユニークに設定できる値です。
1つのページでそのidを持つのは1つの要素だけで、
1つの要素が持てるidは1つだけ。

一方、classというものがあり、
これはidと似た使い方ができるものの、
同じページ内でも複数の箇所で使うことができ、
さらに1つの要素が複数のclassを持つこともできます。

参考
本当のID と Class の違い | CSSPRO

これを踏まえると、idとclassをうまく使い分けてスクリプトを書く必要がありそうです。

div自体をリンクにするスクリプトを汎用化する

まずは簡単そうなこちらから。

前回書いたものは以下のとおり。

<HTML>

<div id="linktest" url="https://google.co.jp">リンクテスト</div>

<JS>

$(function(){
 $("#linktest").click(function() {
  location.href = $(this).attr('url');
 });
});

これは単純にidをclassにしてしまえばOKでした。

<HTML>

<div class="linktest" url="https://google.co.jp">リンクテスト(1)</div>
<div class="linktest" url="https://yahoo.co.jp" >リンクテスト(2)</div>

<JS>

$(function(){
 // ↓idで判別するときは「#id」、classで判別するときは「.class」の書き方
 $(".linktest").click(function() {
  location.href = $(this).attr('url');
 });
});

コンテンツの開閉スクリプトを汎用化する

こちらはスイッチ用のdivとコンテンツ本体のdiv、2つを関連付ける必要があります。

まず、前回書いたものがこちら。

<HTML>

<div id="switch">ここを押すと開閉する</div>
<div id="contents" style="display:none">(開閉したいコンテンツ)</div>

<JS>

$(function(){
 $(".accordion_switch").click(function() {
   obj = document.getElementById($(this).attr(id)).style;
   obj.display = (obj.display == "none") ? "block" : "none";
 });
});

開閉したいコンテンツを増やしつつ、
スクリプトを1つで済ませることができるように書き換えてみます。

HTMLはスイッチ部分に共通のクラスを設定し、
さらにスイッチとコンテンツ本体の組み合わせごとに番号を割り振っていきます。

<HTML>

<div class="acc_switch" acc_id="1">ここを押すと開閉する(1)</div>
<div id="acc_contents_1" style="display:none">(開閉したいコンテンツ 1)</div>
<div class="acc_switch" acc_id="2">ここを押すと開閉する(2)</div>
<div id="acc_contents_2" style="display:none">(開閉したいコンテンツ 2)</div>

jQuery側では、
クリックされたacc_switchの番号に対応するacc_contentsの開閉を切り替えます。
(もっとスマートな書き方があるかもしれませんが、
 いずれにしろこのような感じの考え方で作ることになると思います)

<JS>

$(function(){
 // 「acc_switch」クラスを持つ要素がクリックされたときの処理
 $(".acc_switch").click(function() {
   // 「acc_contents_*」IDを持つ要素のスタイル(へのポインタのようなもの)を取得
   // 「$(this).attr("acc_id")」で、クリックされたacc_switchに含まれるacc_idの値がわかる
   obj = document.getElementById("acc_contents_" + $(this).attr("acc_id")).style;
   // none <=> block の切り替え
   obj.display = (obj.display == "none") ? "block" : "none";
 });
});

これで両方とも汎用化できました。
決めたとおりの命名でタグを書いていけば、
これ以上はスクリプトを書き足すことなく同じ処理を作ることができます。