見出し画像

プログラミング学習日記-43日目

本日はprogateのjqueryの中級道場コース。

中級編で行った処理を、作業書をみつつ行う。
前回は一つも分からず、答えを書き写してこなした感じ。

やれるだけやってみます。^_^


さぁ、真っさら。笑

まずは表示されているモーダルを隠します。

 

①モーダルのCSSにdisplay:none;を書き込みます。
無事モーダルを非表示に。


②次にjQueryのreadyイベントを書き込む。

$(function() {
//この中にjQueryを書く
});


③新規登録ボタン2箇所にクラスを新たに設置。クラス名は「signup-show」

④新規登録ボタンを押したらモーダルが表示されるようにするため、モーダルにidを追加。
id名は「signup-modal」


⑤script.jsに新規登録ボタンを押したらモーダルがフェードインする処理を書き込みます。

クリックイベントはさらさら書けるようになった^_^
処理も無事できました。


次に閉じるボタンを押したらモーダルが閉じる処理。

⑥閉じるボタンにidを追加。
id名は「close-modal」


⑦そして、モーダルを閉じるクリックイベントを書き込む。


処理も無事できました。

ここで第一ステージ終了。
簡単なクリックイベントは理解ばっちり。


--------------------


次にアイコンにカーソルを乗せた時、説明文が浮かび上がる処理。
hoverイベントを使用。

⑧まずはCSSで説明文を隠す。
display:none;をテキストのCSSに追加。


⑨その下にクラス名「text-active」を追加。
処理はdisplay:block;

この後、jQueryでテキスト部にクラス「text-active」を追加する処理を行う。

そうする事によって、非表示にしたテキスト部が表示出来る。

⑩hoverイベントを使い、アイコンにカーソルが乗った際にテキスト部にHTMLにクラス名「text-active」addClassメソッドで追加。逆はremoveClassメソッド
CSSが適用されテキストが表示される。

アイコンは複数あるので、findで子要素を取得しメソッドを適用。

第二ステージ完了。

ここまでノーミス。自分を褒める。笑


次はアコーディオンの作成。
苦手意識強し。

--------------------


11.まずは答えの部分を非表示に。
答えの部分のCSSにdisplay:none;

答えの表示が消える形に。


12.if文を使いjQueryを完成させてみたが動かず。泣
このコードだとクリックして答えは出てくるが、再度クリックしても答えがスライドして消えず。



答え見ましょ。

□間違った箇所□

●変数の代入の仕方。
●クラスを追加する処理はif文の中でする。
●$(this).findの使い方。


なんとか完了。

でもだいぶコード書きながら、行われる処理をイメージ出来るようになってきた。

息子にラムネ買います^_^