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メソッドを効かせています。というわけで最後のコードです。
プログラムの勉強は、挫折し易いです。私も覚える必要を自覚するまでは、参考書などを買って勉強していた時期もありますが、覚えられなかったです。簡単なサンプルプログラムを写して動いて喜んでいたくらいでした。中身を全く理解していないのに。
私はデザイナー時代に
- 会社から自立したかった
- 同年代にあこがれのプログラマーがいた
- 手を出せば案件を引き受けられる状況になった
この動機付けがあったので、ひたすら巷のプログラムを書き写して実行して、本を読んだり、プロジェクトやったりして、500万くらいまでのプロジェクトを形にできる技術を身に着けました。1000万以上のプロジェクトにも要員として参加した経験を得ることができました。
ただ、基本が無かったので、そこそこのプロジェクトでは複数人作業があったり、品質の担保を求められたりするので、コミュニケーションや品質担保の方法が分からず苦労しました。
TECH::EXPERTなら転職活動のサポートも行っていますし、全額返金保証プログラムもありますし、最低月額3万円という金額で受講できるのでおすすめです。
勉強もそうですが、同じ道を志す仲間に巡り合えることも魅力の一つです。 よろしければスクールも是非検討してみてください！
