Progate jQuery 中級編 学習・道場コース攻略Tips【モーダル hover アコーディオン】

jQuery初級編の知識は使いまくるので、数周して感覚をつかんでおいてください。

Progate jQuery 初級編 学習コース攻略Tips【習うより慣れろ】
jQueryの触りの部分です。超頻出。

新しい記述は少ないですが、言われるがままに書いているだけでは頭に入りません。

必ず今何をしているのかを理解しつつ入力してくださいね。

GEN
GEN

html/cssのときと同様、学習コースはそこそこに道場コースをやりこんだ方が無難です。

jQuery中級編 学習コース概要

理解を早めるために、ざっくり内容を区分してみました。

jQueryの型や準備

前回記事でまとめて紹介しています。

Progate jQuery 初級編 学習コース攻略Tips【習うより慣れろ】
jQueryの触りの部分です。超頻出。

 

モーダル制作

こんなのが作れるようになります。

・ページ上部「新規登録はこちら」、下部「さっそく開発する」をクリックすると画面中央に入力フォーム表示される
・×ボタンを押すと消える

作り方の概要はこんな感じです。

①モーダル関連のhtml,cssを記述

②display:none;でデフォルトでは非表示にする

③clickイベント内でfadeInメソッドを用いて右上のログインボタンを押したらモーダルを表示できるようにする

⑤×ボタンを押すとモーダルが消えるようにする。close-modal(一例)クラスを作り、close-modalについてのclickイベントを作成、イベント内でfadeOutメソッドを用いて消せるようにする。

モーダル関連のhtmlやCSSは事前準備されています。こちらが記述するのはjQueryに直接関連する箇所のみです。

hover制作

・中央部のレッスンアイコンにカーソルを重ねると説明文が表示される
・カーソルを離すと消える

作り方はざっくり以下の通り。

①text部分のhtml/cssを通常通り記述する。

②textクラスのCSSにdisplay:none;を追記してデフォルトで非表示にする

③CSSでtext-activeクラスを追加して、display:block;と指定

④jQueryで none とblockを切り替える記述を追記する

addClass removeClassはクラス「名」なのでピリオドやシャープは不要です。

GEN
GEN

ちなみに③をすっ飛ばす方法もあります(後述)

アコーディオン制作

・質問文をクリックすると回答文(answer)が表示される
・もう一度クリックすると閉じる
・クリックするたびに質問文右の+-ボタンが入れ替わる
①html/cssを通常通り記述する。
②answer部分はdisplay:none;でデフォルト非表示にする
③if とhasClassで分岐させる

if文はこんな感じで書きます。

if(trueかfalseを返すコード){
 trueの時の処理
}else{
 falseの時の処理
}

true falseを返す記述にはhasClassを使います。

$(‘A’).hasClass(‘B’):

AがBを持っていればtrue、持っていなければfalse

中級編 道場コース攻略Tips

ほぼ中級編学習コースの復習ですが、ノーヒントでやることになるので難易度は上がります。

これを何も見ずにできれば完璧です。

1. 新規登録モーダルをつくろう

やるべきことは以下3つ。

【index.html】class,id を指定する
【stylesheet.css】モーダル部分にdisplay:none;
【script.js】ひな型とjQueryを書く。

class名、id名は画面左の手順を参考にしてください。

GEN
GEN

CSSはdisplay:none;だけ忘れずに

jQueryのひな型は前回も紹介したこちらです。

$(function() {
  jQueryの記述
});

モーダルの演出は以下2つです。これらをjQueryで記述できればクリアとなります。

.signup-show がクリックされたら #signup-modalをフェードインさせる。
#close-modal がクリックされたら#signup-modalをフェードアウトさせる。

2. レッスン一覧をつくろう

【index.html】特になし
【stylesheet.css】 説明文に対してdisplay:none; (.text-activeについて追記)
【script.js】.lessonに触れた時、触れてないときをhoverで分岐。

プロゲートの回答は以下の手順です。

①text-activeクラスにてdisplay:block;を指定
②レッスン部分に対してhoverイベントの大枠を作成
③$(this).find(‘説明文部分’) で独立した演出にする
④③の続きにaddClass RemoveClassでtext-active を置換したり消したりする

つまりdisplay;none とdisplay:block; をhoverによって分岐させれば良いわけです。

別解としてCSSメソッドだけで記述したパターンを示しておきます。これなら.text-active が不要になり①の行程が省略されます。

$(‘.lesson’).hover(
function(){
$(this).find(‘.text-contents’).css(‘display’,’block’)
},
function(){
$(this).find(‘.text-contents’).css(‘display’,’none’)
}
);

これでもクリアになります。得られる結果も同じです。 

3. アコーディオンをつくろう

【index.html】特になし
【stylesheet.css】answerに対して display:none; 
【script.js】以降で解説

すぐ思いつくコードはこんな感じでしょうか。

$(‘.faq-list-item’).click(function() {
$(‘.answer’).fadeIn();
});

これだと説明文が出てはくれますが、3つ同時に出てしまいます。そこで…

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

thisとfindで独立演出できるようにしました。

$(this).find(‘.answer’) までは$answerでひとくくりしておくと楽です。

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

しかし、今回はfaq-list-itemという1か所を1度押すと文章が出て、もう1度押すと消える分岐が必要です。clickイベントだけでは完全な実装はできません。

ということでifを使います。

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

if($answer.hasClass(‘open’)){
アコーディオンが出ているときの記述
}else{
アコーディオンが閉じているときの記述
}
});

【アコーディオンが出ているとき】アコーディオンが閉じる・-が+になる
【アコーディオンが閉じているとき】アコーディオンが出る・+が-になる

openというクラスはhtmlにもcssにも存在しないですが、ここで新しく作ってしまってOKです。

if内にはopenクラスを外す記述と追加する記述をしておけばボタン開閉のニュアンスが出せます。

fadeOut fadeInで演出をつけたら、あとは+-を交換して完成です。

GEN
GEN

交換するときはtextメソッド!

プログラミング

GENのプロフィール

(Youtubeにて毎週生放送中)

意識の低いIT自営業7年目。ネットを用いた物販・広告・金融業が得意。2020年はかねてより準備していたプログラミング(マークアップ・コーディング)の発信を開始。 twitterはこちら

禿げてもええやないか!スキンヘッド男道