プログラミング独学day52の学習で、得たことや気づきを教えて！
今日は
・jQueryでhoverした時にセルにハイライトをつける方法
をアウトプットします！
こんにちは。プログラミングでweb制作ができるようになりたいharuです。
2歳0歳の育児をしながら、22時〜1時に独学しています！
→プログラミング学習day52、もりけん塾day8
わかったことや、気付きをログに残します。
同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。
【jQuery】hoverしたらテーブルセルにハイライト
今日は、「jQuery標準デザイン講座」レッスン18のアウトプットです。
難易度、☆3つになり構成もだいぶ難しく感じるようになってきました。
【完成物】
完成物はこちらです。
テーブルセルをhoverすると、ハイライトがつく仕様です。gifファイルにしたら動画みにくいかなw
構成を考える
まず、お決まりの構成を考えていきます。
①セルにマウスオーバーする
②同行のセルのスタイルを変更
③同列のセルのスタイルを変更
④マウスアウトしたらセルの色を元に戻す
hover() addClass() removeClass() を使うのかな？ってところまでは想像できた。
→できるだけ自分の頭で想像してから、チュートリアル見るようにしてます。
【制作】ハイライトをつけよう
まず、htmlの確認から。
<tr>に<th><td>がズラーっと並んでテーブルを構成しています。
構成①②：セルにマウスオーバー→同行のスタイル変更
hover()メソッドを使って、中に関数を書いていきます。
.addClass()メソッドで、事前に用意した.targetクラス(セルの背景色を変更)を追加。
・this→記述の主語である $(“td”)をさす
・.parent→<td>の親である <tr>をさす
＝いわゆる「行」を選択しています
構成③：同列のセルのスタイル変更
次に列のスタイルを変えます。つまずいたのはここです。
＊考え方＊
①hoverされたのは、行の中で何番目なのか？
→たとえば、赤い枠で囲まれた行の中で、選択されている”2000″は2番目です。
これを、コードにしてみる。
myIndexという変数を定義します。
<tr>の中で何番目か？はindex()メソッドで求められます。
②それぞれの行の、myIndex番目の背景色を変えます。
→先ほど選択した”2000”はa行のなかで2番目なので、b〜g行の2番目をそれぞれ選択します。
これをコードにしてみる。
特定の順番の<td>要素を選択するときは、nth-child擬似クラスを使います。
「各要素のn番目に処理をする」メソッドのこと。
→ここでは、<td>のn番目それぞれに処理をするという使われかた
そして、わたしのわからなかったポイント。
(“+ myIndex +”)の記述です。
jQueryのセレクタは、「文字列」で書くから。【以下参考リンクより引用】
（myIndexが0の場合） 文字列
td:nth-child( + myIndex + 文字列) でtd:nth-child(0)という文字列を得ています。
→ドンピシャなteratail記事があったので貼っておきます。
③index()メソッドとnth-child()メソッドのカウントの違いを調整
nth-child()メソッド：１からカウント
このようなカウントの違いを調整するために、定義した変数の値に+1をします。
これは、①のmyIndexの定義の後に書いておきます。
構成④：マウスアウトしたらセルの色を元に戻す
removeClass()メソッドで.targetクラスを外します。
これで完成です。
あとがき
＊今日の工夫＊
・解決の際、ググっても全然出てこなかったので「teratail」で記事を探した
・完成版の動画でgifを使って見た
今日は以上です。
Thanks：師匠「もりけんさん」(@terrace_tec)
もりけんさんのHPはこちら
