プログラミング学習日記-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の使い方。
なんとか完了。
でもだいぶコード書きながら、行われる処理をイメージ出来るようになってきた。
息子にラムネ買います^_^