【初心者】jQuery eqメソッド／indexメソッド／prev,next（スライド切替）【備忘録２０】

##11/27～11/29に勉強したこと
###eqメソッド
jQueryは、配列のようになっているので【インデックス番号】の
要素を取得し、変更したりすることができる。
（※インデックス番号は【0】から始まるので今まで通り気を付ける！）
【例1】

<!--html-->
<ul>
 <li>ねこ</li>
 <li>いぬ</li>
 <li>うさぎ</li>
</ul>

//js
$('li').eq(2).css('color','red');

出力⇒うさぎだけ赤色文字になる！

【例2】

<!--html-->
...<div class="hide-btn" id="hide-btn">２枚目を隠すボタン！</div>
...
<ul class="slides">
  <li class="slide"><img src=...></li>
  <li class="slide"><imd src=...></li>
</ul>
...

//js

$('#hide-btn').click(function(){
 $('.slide').eq(1).fadeOut();
});

出力⇒...ボタン！を押したらふたつめの画像が隠れるようになる。
【気を付ける】
-　liのクラス名を書くこと。（ulのクラス名は書かない！）
-　eq()に関しては、''などは付けない！

####スライドの表示切替
１つの画面に１つの画像が表示されるようにしておき
ボタンで画像を切替できるようにしていく。

１：はじめに表示される１枚をactiveで表示させておく
２：表示中の画像をactiveを取り除くことにより非表示に
３：２枚目の画像をactiveを付けることで表示させる
【例】
＊１段階目！デフォルト表示

<!--html-->
<ul class="slides">
     <li class="slide active"><img src="..."></li>
     <li class="slide"><img src="..."></li>
....
</ul>
  <div class="index-btn-wrapper">
     <div class="index-btn">1</div>
     <div class="index-btn" id="second-btn">2</div>
....  
  </div>

/*css*/
.slide{display:none;}
.active{display:block;}

出力⇒１枚目だけ表示されている状態。

＊２段階目と３段階目！２ボタンを押すことで１枚目を非表示にして２枚目表示

//js

$('#second-btn').click(function(){
  $('.active').removeClass('active');
  //ここでアクティブを取り除いて非表示に！
  
  $('.slide').eq(1).addClass('active');
  //アクティブを追加して、２枚目を表示させる！
});

出力⇒２ボタンを押すことで、１枚目が非表示／２枚目が表示される。
【気を付ける】
-　取り除くor追加する後に書く('active')は「.や#」は付けない。

###indexメソッド
例えば下記のようなHTMLがある場合、indexメソッドを用いると取得が簡単！

<!--html-->
<ul>
  <li>HTML</li>
  <li class="active">CSS</li>
</ul>

//js
$('li').index($('.active));

####クリックしたボタンに対して表示切替
１画面に１画像を表示させ、その下のボタンを
いくつか用意し、１つ１つボタンによって表示画像を変える書き方。
【例】

<!--html-->
<ul class="slides">
     <li class="slide active"><img src="..."></li>
     <li class="slide"><img src="..."></li>
....
</ul>
  <div class="index-btn-wrapper">
     <div class="index-btn">1</div>
     <div class="index-btn" id="second-btn">2</div>
....  
  </div>

/*css*/
.slide{display:none;}
.active{display:block;}

/*そのほかボタンの設定などは略*/

//js
$('.index-btn').click(function(){
  $('.active').removaClass('active');
  var clickedIndex=$('.index-btn').index($(this));
    //↑クリックしたところを代入
  $('.slide').eq(clickedIndex).addClass('active');

###prev/nextメソッド
【例】

<!--html-->
<ul>
 <li>犬</li>
 <li id="cat">猫</li>
 <li>うさぎ</li>
</ul>

$('#cat').prev().css('color','red');
$('#cat').next().css('color','blue');

出力⇒「犬」が赤色文字／「うさぎ」が青色文字になる。

####nextボタンとprevボタンで表示切替
１画面に１画像を表示させ、画像右上に「next」／左上に「prev」のボタンを用意し
「next」だと次画像へ「prev」だと前画像へ表示を切り替える書き方。

<!--html-->
<div class="change-btn-wrapper">
     <div class="change-btn prev-btn">← 前へ</div>
     <div class="change-btn next-btn">次へ →</div>
</div>

<ul class="slides">
     <li class="slide active"><img src="..."></li>
     <li class="slide"><img src="..."></li>
.
.
.
</ul>
  <div class="index-btn-wrapper">
     <div class="index-btn">1</div>
     <div class="index-btn" id="second-btn">2</div>
.
.
.  
  </div>
<!--その他略-->

/*css*/
.slide{display:none;}
.active{display:block;}
/*その他略*/

//js
...$('index-btn').click(function(){
  $('.active').removeClass('active');
  var clickedIndex=$('.index-btn').index($(this));
  $('.slide').eq(clickedIndex).addClass('active');

//↑ここまでは下のボタンの記述
//↓ここからは次へ・前へのボタンの記述
$('.change-btn').click(function(){
  var $display=$('.active');
  $display.removeClass('active');
  if($(this).hasClass('.next-btn'){
   $display.next().addClass('active')
   }else{
   $display.prev().addClass('active')
  }
});

ただ上記だけでは、次へ前へは反応するが。１枚目より前と４枚目より後は
画像が何も表示されない状態になってしまうので、次の章で
次へ、前へのボタンを表示させない書き方をまとめる。

####最初のスライドと最後のスライドのボタン表示
#####１：はじめの画面の状態
まず、はじめに表示されている１枚目の状態で
既に「前へ」のボタンは非表示にしておくべきなので
cssにて{display:none;}で非表示にしておく。

#####２：まず.index-btnのクリック内で書いていく。
-　変数を設けて.slide要素の.active要素のインデックス番号を代入。

var slideIndex=$('.slide').index('.active');

-　ifを使用して、先ほどのインデックス番号が0／3の場合で書き分ける。

if(slideIndex===0){
 $('.prev-btn').hide();
 }else if(slideIndex===3){
 $('.next-btn').hide();
}

-　これだけでは１度消えたボタンが戻ってこない！上から順に処理されるので
＜＜if文の前＞＞に両方のボタンが表示されるように書く必要がある。

$('.change-btn').show();

#####３：.change-btnのクリック内でも同様に書く
ここでも書いておかないと、上部の「前へ」「次へ」のボタンを
実際に押した時に反応しなくなるので忘れないように気を付ける！

##振り返り・反省
#####振り返り
慌てて進めるのではなく、ひとつひとつ分かって書いていかないと
意味がないと感じた。今現状どういう表示になっているのかなど
考えながら書かなければいけない。
指示通り書くだけでは力にならないと感じた。

#####反省
3日ほど勉強ができなかった。原因は予定の合間で出来なかった事と
jQueryを進めていくにあたって、HTMLやCSSを再度書いたりしていく中で
前に学習したことがまだ身についておらず、その都度振り返って確認を
行うことで進捗自体遅くなってしまっていたのが原因かと思う。
jQueryが一度終わったら今まで学んだ分を一度おさらいすることにしようと思う。