複数の要素を効率良く動かすには？

質問

こんばんは。
javascriptはよくわかってないのですが、見よう見まねで弄っています。

下記のスクリプト、動作は狙い通りになっているので問題は無いと言えば無いのですが・・・
項目が増えてくるととてもややこしい事になってしまいます。

そこで質問なのですが

$("btn").click(function(){
$("#content1").hide();
$("#content2").hide();
$("#content3").fadeIn("slow");
$("#content4").hide();
$("#content5").hide();

のように、
特定のボタンを押したら、ひとつの要素だけが現れ、あとは消える
というのをもっと効率良く記述できないのでしょうか？

$("#content4,content5")といった記述でも随分とすっきりするとは思いますが（あってます・・・よね？）

このボタンを押したら#content3だけが現れ、他の#content◯◯は消える（元から消えている場合は現れない）と言う動きです。

もし、効率の良い記述方法がありましたら教えて頂きたいです。
よろしくお願いします。

回答No.1

fujillin · ベストアンサー

なんのライブラリでの記述か不明ですが…

ご質問のようにidだけを根拠に処理するなら、どうも最後の数字がかわるという規則はあるみたいなので、ループ処理で
　$("#content" + i ).hide();
のようにして全部を非表示にしたり、分岐で表示/非表示とする方法が考えられます。

しかし、大抵の場合、ボタンの位置と表示する要素間でなんらかの関係（順序が同じとか）があったり、表示/非表示の対象となる要素が構造上同じ位置関係にあることがほとんどですから、idに頼らずに指定できるようにすることが可能であると考えられます。

例えば、#content直下のdiv要素が表示/非表示の対象だとすれば
$("#content>div").hide();
で一旦全部非表示にしておいて、その後で表示したいものだけを表示すれば良いとか。

表示対象の特定方法も、ボタンと同じ（あるいはボタンによって指定された）順番などによって決まるようになっていれば、idを振る必要はなくなります。
このような個々のidに頼らない考え方にすることで、要素の増減が起こるたびにスクリプトを書換えるようなことも不要になりますし、対象の数に固定されることもなくなります。
イベント処理も個々に同じようなものを記述する必要もなくなり、一括で記述できるようになります。

お礼

今回の用途ではこの$("#content>div").hide();が有効でした。
一旦全て非表示という方法が出来るのですね。
idに頼る方法は効率も悪く、ミスも生みやすそうだと言うのが比較してよくわかりました。

ありがとうございます！

回答No.2

bakaok

HTML側を変更して良いならIDだけではなくてクラスも作る。
でクラスで非表示にして必要なIDだけ表示する様に書く。

お礼

具体的に記述方法がわかりませんが（勉強不足なもので・・・）
IDだけでは無くクラスで表記することで違ってくるのですね。
覚えておきます。
ありがとうございます！