jQuery初級編の知識は使いまくるので、数周して感覚をつかんでおいてください。
新しい記述は少ないですが、言われるがままに書いているだけでは頭に入りません。
必ず今何をしているのかを理解しつつ入力してくださいね。
html/cssのときと同様、学習コースはそこそこに道場コースをやりこんだ方が無難です。
jQuery中級編 学習コース概要
理解を早めるために、ざっくり内容を区分してみました。
jQueryの型や準備
前回記事でまとめて紹介しています。
モーダル制作
こんなのが作れるようになります。
・×ボタンを押すと消える
作り方の概要はこんな感じです。
②display:none;でデフォルトでは非表示にする
③clickイベント内でfadeInメソッドを用いて右上のログインボタンを押したらモーダルを表示できるようにする
⑤×ボタンを押すとモーダルが消えるようにする。close-modal(一例）クラスを作り、close-modalについてのclickイベントを作成、イベント内でfadeOutメソッドを用いて消せるようにする。
モーダル関連のhtmlやCSSは事前準備されています。こちらが記述するのはjQueryに直接関連する箇所のみです。
hover制作
・カーソルを離すと消える
作り方はざっくり以下の通り。
②textクラスのCSSにdisplay:none;を追記してデフォルトで非表示にする
③CSSでtext-activeクラスを追加して、display:block;と指定
④jQueryで none とblockを切り替える記述を追記する
addClass removeClassはクラス「名」なのでピリオドやシャープは不要です。
ちなみに③をすっ飛ばす方法もあります（後述）
アコーディオン制作
・もう一度クリックすると閉じる
・クリックするたびに質問文右の＋－ボタンが入れ替わる
②answer部分はdisplay:none;でデフォルト非表示にする
③if とhasClassで分岐させる
if文はこんな感じで書きます。
trueの時の処理
}else{
falseの時の処理
}
true falseを返す記述にはhasClassを使います。
AがBを持っていればtrue、持っていなければfalse
中級編 道場コース攻略Tips
ほぼ中級編学習コースの復習ですが、ノーヒントでやることになるので難易度は上がります。
これを何も見ずにできれば完璧です。
1. 新規登録モーダルをつくろう
やるべきことは以下３つ。
【stylesheet.css】モーダル部分にdisplay:none;
【script.js】ひな型とjQueryを書く。
class名、id名は画面左の手順を参考にしてください。
CSSはdisplay:none;だけ忘れずに
jQueryのひな型は前回も紹介したこちらです。
jQueryの記述
});
モーダルの演出は以下２つです。これらをjQueryで記述できればクリアとなります。
#close-modal がクリックされたら#signup-modalをフェードアウトさせる。
2. レッスン一覧をつくろう
【stylesheet.css】 説明文に対してdisplay:none; （.text-activeについて追記）
【script.js】.lessonに触れた時、触れてないときをhoverで分岐。
プロゲートの回答は以下の手順です。
②レッスン部分に対してhoverイベントの大枠を作成
③$(this).find(‘説明文部分’) で独立した演出にする
④③の続きにaddClass RemoveClassでtext-active を置換したり消したりする
つまりdisplay;none とdisplay:block; をhoverによって分岐させれば良いわけです。
別解としてCSSメソッドだけで記述したパターンを示しておきます。これなら.text-active が不要になり①の行程が省略されます。
function(){
$(this).find(‘.text-contents’).css(‘display’,’block’)
},
function(){
$(this).find(‘.text-contents’).css(‘display’,’none’)
}
);
これでもクリアになります。得られる結果も同じです。
3. アコーディオンをつくろう
【stylesheet.css】answerに対して display:none;
【script.js】以降で解説
すぐ思いつくコードはこんな感じでしょうか。
$(‘.answer’).fadeIn();
});
これだと説明文が出てはくれますが、3つ同時に出てしまいます。そこで…
$(this).find(‘.answer’).fadeIn();
});
thisとfindで独立演出できるようにしました。
$(this).find(‘.answer’) までは$answerでひとくくりしておくと楽です。
var $answer = $(this).find(‘.answer’);
$answer.fadeIn();
});
しかし、今回はfaq-list-itemという1か所を1度押すと文章が出て、もう1度押すと消える分岐が必要です。clickイベントだけでは完全な実装はできません。
ということでifを使います。
var $answer = $(this).find(‘.answer’);
if($answer.hasClass(‘open’)){
アコーディオンが出ているときの記述
}else{
アコーディオンが閉じているときの記述
}
});
【アコーディオンが閉じているとき】アコーディオンが出る・＋が－になる
openというクラスはhtmlにもcssにも存在しないですが、ここで新しく作ってしまってOKです。
if内にはopenクラスを外す記述と追加する記述をしておけばボタン開閉のニュアンスが出せます。
fadeOut fadeInで演出をつけたら、あとは＋－を交換して完成です。
交換するときはtextメソッド！
