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）までであることに注意してください。）