jQuery Progate 中級

jQueryの読込み

ｊQueryを読み込むには、jQueryライブラリーを読み込む必要がある。

１からプログラムを構築していては大変なので、誰かが既に作ったライブラリーからプログラムを呼び出して使うため。

htmlでまずjQueryを読み込む必要があり、body終了タグの直前に以下、

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
　

を差し込む。そして、javascriptファイル内では、

$(function(){

//この中にｊQuery文を書いていく

});

モーダルの作成

モーダルとは、指定の場所をクリックイベントにて表示したり、非表示になったりする要素。

作成方法は下記

①htmlで表示させる

②CSSで非表示にさせる。

display: none;

③jQueryで指定の動作を確認したタイミングで、htmlにクラスを与えて表示させる。

$('#login-show').click(function(){
 $('#login-show').fadeIn();
});

表示ボタン　と　閉じる　のボタンに対するそれぞれのコードの記述が必要

hoverイベント

$('lesson-hover').hover(function(){

function(){
//カーソルが乗っているときに実行したい処理
},
function(){
//カーソルに乗っていないときに実行したい処理
}

})；

hover時に text-activeというクラスがあればレッスンの説明を表示するようにする。

そのためには

①cssで　.text-active{display: block}を指定

②cssでマウスが乗った時に.text-activeが表示されるようにjsでコード

③cssでマウスが外れたときに.text-activeが非表示になるようにjsでコード　

【addClassメソッド】

$('.text-contents').addClass('text-active');
                          //クラス指定時にドット「.」は不要な点に注意★

【removeClassメソッド】

$('.text-contents').removeClass('text-active');

                          //クラス指定時にドット「.」は不要な点に注意★

以下例文

$('.lesson-wrapper').hover(function(){
        
    $(this).find('text-contents').addClass('text-active');
   //①、② 
　  $(this).find('.text-contents').removeClass('text-active');
　　//③、④　
    });

$(this).find('text-contents').addClass('text-active');　

①this は　esson-wrapper　クラスの上にカーソルが来たら
lesson-wrapper　クラスの中から　text-contents　クラスを全て取得する

②text-contents　に対して　text-active 　クラス　を加える

③this は　lesson-wrapper　上からカーソルが外れたら
lesson-wrapper　クラスの中からtext-contentsクラスを全て取得する

④text-contents 　に対して　text-active　クラス　を除外する

という状況。

アコーディオン

htmlで

<div class="answer"></div>
<div class="answer-open"></div>

として、　下のanswer-open　は　answer　が開いたときの目印のクラス名にする。

【hasClass】

引数に指定した　クラス　を　オブジェクト　が持っているのか　判定するときに使用。

オブジェクト　が指定の　クラス　を持っていれば　true。

  持っていなければ　false　を返す。

以下html

<div class="answer"></div>
<div class="annswer open"></div>

以下、js

$('.answer').hasClass('open');

　//　結果：　false

$('.answer open').hasClass('open');

//　結果：　true

【if文を用いた開閉操作】

faq-list-item　をクリック　→　.answer  は  .open　を持っているか？

持っている場合：　true　→　.open　を外す　→　.answer　を隠す

持っていない場合：　false　→　.openをつける　→　.answer　 を表示。

以下、応用例文。

  $('.faq-list-item').click(function() {            
   var $answer = $(this).find('.answer');            
   if ($answer.hasClass('open')) {            
   $answer.removeClass('open');            
   } else {            
   $answer.addClass('open');            
     }            
  });

①var $answer = $(this).find('.answer');　→　.faq-list-item が　クリック　されたときに　.faq-list-item　内の　.answer　値が　取得される。そして $answerに代入される。　

つまり　htmlの　answerクラス　は　クリックされると　以下の処理をしますということ。

②もし　.answer　がオブジェクト内に　.open　を持っている場合trueで

.answer　から　.open　を取り除く処理を実行

③.answer　がオブジェクト内に　.open　を持っていない場合はfalseで

.answer に　.open　を加える処理を実行。

現状は　.open  はないので　.open　を加える処理を実行する。

正直ここだけで終わらせると意味が分からないので、次のコードをさっさと見た方がよいかと（笑）

  $('.faq-list-item').click(function() {
   var $answer = $(this).find('.answer');
   if($answer.hasClass('open')) { 
     $answer.removeClass('open');
     // slideUpメソッドを用いて、$answerを隠してください
     $answer.slideUp();

     // 子要素のspanタグの中身をtextメソッドを用いて書き換えてください
    $(this).find('span').text('+');
     
   } else {
     $answer.addClass('open'); 
     // slideDownメソッドを用いて、$answerを表示してください
       $answer.slideDown();
     
     // 子要素のspanタグの中身をtextメソッドを用いて書き換えてください
     $(this).find('span').text('-');
     
   }
 });

さっきのものにいくつか追加。

①-1　if($answer.hasClass('open')) {
$answer.removeClass('open');

$answer.slideUp();

これは　もし　.answer　がオブジェクト内に　.open　を持っている場合trueで

.answer　から　.open　を取り除く処理を実行。

それに合わせて、.answer  を　フェードアウトで消す処理も実行。

つまり、openがある時にクリックをしても閉じる処理をするという意味。

①-2 $(this).find('span').text('+');

→span タグを取得して、このテキストを”＋”に書き換える処理も実行。

②-1 $answer.addClass('open');
// slideDownメソッドを用いて、$answerを表示してください
$answer.slideDown();

.answer が .open をもっていない場合は　.open　を追加して、

slideUP　で　.open　を表示。　

こちらは逆で、オープンを持っていないときにクリックするとオープンをしますよという意味。

かつ　

$(this).find('span').text('-');

.answer　内の　span すなわち+    を取得して　text すなわち－　に変えるという処理を実行。

これをすべてのanswerに実行しているということで、とても納得。

これでProgate中級編は終了！