jQuery中級コース＆道場コース｜メモ｜アラフォーthisとfineとアコーディオン

jQuery始めました

JavaScriptコースは計算！って感じだったけど

jQueryコースは動きがあって🐫は楽しいです。

特に中級はサイトを作ってる感があって良いでした。

とは言え、楽しいけど馴染めてないので頭を使いますね。

中級コースは3週やってどうにか理解（消化は出来ていない模様）

道場コースはメモを見ながら何とかクリアでした。

一つ一つのメソッドやイベントがわかってきても

目的のためにどうやって組み立てるのかが難しいですね。

数学で言ったら「公式に当てはめる」ってことなのかな？

何度も詰まったthisとfine

this と fine 、詰まりまくりました。

初級の問題についてはさくさく進められたのだけど

中級の2章で出てきたときには「うむわからん」となりました。

これは「どう書いたらいいのかわからない」と言うより

「何を言われているのかわからない」状態。

とりあえず答えを写して進めちゃうも、何がどうなっているのかよくわからないのでした。

書いてみると理解できた気分になる法則

頭に残ってないのだなってことで

ポイントをメモに纏めながら初級を復習。

続いて中級も復習。

けどやっぱり何を言われているかがイマイチわからないので答えをコピペ。

更に答えをメモに取って、注釈をつけてみる。

6/9のhoverイベント

$(‘.lesson-hover’).hover(
function() {
　　$(this).find(‘.text-contents’).addClass(‘text-active’);

　オンマウスになっている.lesson-hover　の中の.text-contentsに　クラスtext-activeを付ける
},
function() {
$(this).find(‘.text-contents’).removeClass(‘text-active’);
}
);

なるほどー。となりました。

取り合えず、何が書かれているのかは理解。

8/9のアコーディオン

納得が出来たので続きは答えを見なくてもできました。

$(‘.faq-list-item’).click(function(){
var $answer = $(this).find(‘.answer’);

 クリックした.faq-list-item　の中にある.answerを　$answerに代入

・・・

・・・

$(this).find(‘span’).text(‘-‘);

クリックした.faq-list-item　の中にあるspanの　テキストを – に
}
});

これで繰り返しやっていくうちに覚えられそうです。

少なくともメモのどこを見ればいいかは把握。

openはどこから来てどこへ行くのか

学習コースの時は指示に従ってフムフムと書き進めていたアコーディオン部分。

道場コースにきて疑問が。

「クラスopen」ってどこから来たの？

htmlのファイルを見てもcssのファイルを見ても

どこにも記述のない謎のクラス「open」

これはどちら様なんでしょうか。

と言うか、中級コースをやっていた時にアレ？と思いたいものです。

ちゃんと考えながらやらないから後で悩むことになるのだ🐫よ。

スライドを見返した結果

openの正体ははっきりくっきり説明されていた訳ではないのですが

（🐫には見つけられなかっただけかもしれないけど）

8/9のスライドをじっくり見直して、自分なりに理解した結果

openと言うクラスが存在するわけではなくhasClassで判定するためのスイッチのようなもの

となりました。

クリックした.faq-list-itemの中の.answerに.openが付いていたら

→.answerから.openを外して、.answerを隠して、<span>の文字を+に

クリックした.faq-list-itemの中の.answerに.openが付いていなければ

→.answerに.openを追加して（class=”answer open”になる）、.answerを表示して、<span>の文字を-に

openを付けたり外したりすることで判定が変わる→開いたり閉じたりする

翻訳（？）したら分かった気分になる法則

検証も見てみました

つまりhtmlが書き換わってるのよね。と。

そういう処理がされているのよね。と。

ふと思いついてブラウザでHTMLを表示、検証モードにしてアコーディオン部分をクリック。

class=”answer”にopenが付いたり消えたりしていました。

頭では分かっていたつもりだったけど、目にしてみるとすごい説得力。

ついでに他の部分も見てみたりして。

面白いでした。

今後の予定

ProgateではjQery上級→ruby

同時進行で書籍「作りながら学ぶHTML/CSSデザインの教科書」→自サイトリニューアル