prorate:JQuery上級コース　その１

-JQueryもJavascriptと同様インデックス番号が
割り振られていて0 から始まっている

eqメソッド

eqメソッドを用いると、jQueryオブジェクトの中から、eqの引数の数字と同じインデックス番号の要素を取得できる

script.js

 $('.slide').eq(1).fadeOut(); //slideクラスの２つ目を隠す

スライド実装

「.slide」要素は「display: none;」を用いて基本的に表示されないようにし、activeクラスがついた「.slide」要素だけが表示されるようにします。
このactiveクラスをjQueryによって付け替えることによって、表示されるスライドを変更していきます。progate

手順
ボタン「2」を押した時、2枚目のスライドが表示されるようにしましょう。
以下の様な手順で実装していきます。
①初期状態は1枚目を見せる
ボタン「2」をおした時、
②表示中のスライドを非表示にする（acitveクラスを外す）
③2枚目を表示する（activeクラスをつける）

script.js

$(function() {
  $(‘#second-btn’).click(function() { // ２つ目のボタンを押した時
    $('.active').removeClass('active'); //１枚目のimgを隠す
    $('.slide').eq(1).addClass('active'); // ２つ目のインデックスを取り出し表示させる
    
  });
});

indexメソッド

indexメソッドを用いると、「li」要素の中の「.active」要素のインデックス番号（1）を取得できます。

①クリックされたボタンのインデックス番号を取得
②インデックス番号と対応するスライドを表示

script.js

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

一枚送りのスライド　prevとnext

prevメソッドは、jQueryオブジェクトの兄弟要素（同じ階層の要素）の中から1つ前の要素を、nextメソッドは1つ後ろの要素を取得することができます。progate

script.js

$('.change-btn').click(function() {
    var $displaySlide= $('.active')
    
    $displaySlide.removeClass('active');
	//今表示されてるactive要素を非表示にする
    
    if($(this).hasClass('next-btn')){
      $displaySlide.next().addClass('active');
	// $displaySlideにnext-btnがあった場合次の要素へ

    }else{
      $displaySlide.prev().addClass('active'); 
	// $displaySlideにnext-btnがなかった場合前の要素へ

    }

    
  });

条件分岐

最初のスライドが表示されているときは「前へ」ボタンを隠す。
最後のスライドが表示されているときは「次へ」ボタンを隠す。

script.js

$(function() {
  $('.index-btn').click(function() {
    $('.active').removeClass('active');
    var clickedIndex = $('.index-btn').index($(this));
    $('.slide').eq(clickedIndex).addClass('active');
    
    // 1. 変数slideIndexに「.active」要素のインデックス番号を代入してください
    var slideIndex =$('.slide').index($('.active'));
    
    // 3. change-btn要素を表示してください
    $('.change-btn').show();
    
    // 2. ifとelse ifを用いて、「.change-btn」の表示/非表示をおこなってください
    if(slideIndex == 0){
      $('.prev-btn').hide();
    }else if(slideIndex == 3){
      $('.next-btn').hide();
    }
    
  });
  
  $('.change-btn').click(function() {
    var $displaySlide = $('.active');
    $displaySlide.removeClass('active');
    if ($(this).hasClass('next-btn')) {
      $displaySlide.next().addClass('active');
    } else {
      $displaySlide.prev().addClass('active');
    }
    
    // 「.index-btn」のクリックイベントと同様の処理を記述してください
     var slideIndex =$('.slide').index($('.active'));
    
    // 3. change-btn要素を表示してください
    $('.change-btn').show();
    
    // 2. ifとelse ifを用いて、「.change-btn」の表示/非表示をおこなってください
    if(slideIndex == 0){
      $('.prev-btn').hide();
    }else if(slideIndex == 3){
      $('.next-btn').hide();
    }
    
  });
});

共通部分の関数化

script.js


  function 関数名(){
// 関数の中身
}

関数名(); // 呼び出し方

length

lengthを用いると、jQueryオブジェクトの要素の個数を取得できます。これはJavaScript基礎編で学んだlengthに似ていますね。
これを活用して、スライドの枚数が変わっても、関数の内容を書き換えなくて済むようにしてみましょう。progate

script.js

 if (slideIndex == 0) {
      $('.prev-btn').hide();
    // 「3」の部分を、lengthメソッドを用いて書き換えてください
    } else if (slideIndex == $('.slide').length - 1) {
      $('.next-btn').hide();
    }

// （インデックス番号は0から(スライド数 - 1）までであることに注意してください。）