CSSのクラスが複数ある時に、別々のスタイルを適用したかったりイベントを適用したかったりする場合があると思います。そんなときにはとっても便利な方法がありますよ。
同じクラスがついた要素を別々に取得する
例えば、.bodyって名前のclassが三つあったとして、cssだとこのこれは一種類のセレクタだと認知されますよね。ただ、jQueryを使えば、セレクタは一種類ですが、styleを適用したり、classを追加したりすることで、別物として扱う事ができます。ちょっと、意味不明なので少しでも分かりやすく図にするとこうなります。
じゃじゃーん。こんな感じになります！こういうのができると、クラスそれぞれに対して別々のスタイルを適用したりクラス適用したり、幅が広がりそうですよね。
とりあえず最初は、同じクラスの要素を取得してみます。
こんな感じのコードでできるはずです。
各要素をjQueryオブジェクトに変換する
あんまりこの辺よくわかんないんですが、HTML要素だけ取得しててもその要素をjQueryで操作する事ができません。さっきからHTML要素と呼んでるものは、JavaScriptではDOMと呼ばれているものです。DOMを操作する為には、別の方法になります。jQueryでも機能や処理の中でDOMを操作しています。ただ、そのjQueryの機能を使うためにはDOMを一度jQueryオブジェクトに置き換える必要があります。ちなみにjQueryオブジェクトにしたものではDOMは扱えないので、jQueryオブジェクトにした後にDOMを扱いたいのであれば、jQueryオブジェクトの[0]を取得する必要があります。
と、言うわけでそれぞれを、jQueryオブジェクト化したことでclickメソッドを使う事が可能になりました。
同一クラスにidを指定しないでhide、showの切り替えをやる
これがやりたかったんですが、脱線しました。やりたいことはこういうことです。
ちょっと図でも分かりづらいですが、クリックしたら同一クラスであっても別の処理がやりたいということです。結果的に書いたコードは同じhide,showと同じ動作をするんですが、これをやることによって、要素ごとにちまちまIDつけなくてもいいので便利かなと思いました。何故これをしないとIDつけないとダメなのかというと、クラスだけにセレクタを適用した場合、全クラスに対してclickメソッドが効いてしまうからです。なので別々にクラスを取得して、別々にclickメソッドを効かせています。というわけで最後のコードです。
コメントを残す