HTML&CSS,  jQuery

jQuery:スライドの切り替え2(クリックしたボタンに対応する画像を表示する)

jQuery:スライドの切り替え2(クリックしたボタンに対応する画像を表示する)

解答

html

<ul class="slides">
   <li class="slide active"><img src="#"></li>
   <li class="slide"><img src="#"></li>
   <li class="slide"><img src="#"></li>
   <li class="slide"><img src="#"></li>
</ul>
        
<div class="index-btn-wrapper">
   <div class="index-btn">1</div6gt;
   <div class="index-btn">2</div>
   <div class="index-btn">3</div>
   <div class="index-btn">4</div>
</div>

jquery

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

初期状態で、1枚目の画像にactiveをつけているので、
ボタンがクリックされた際には、1枚目に設置されている
activeクラスを外すことから始める。

それが、$('.active').removeClass('active');の部分。

次にクリックしたボタンのインデックス番号(html内で何番目の要素なのか)を取得し、
その番号に対応した画像に取り外したactiveクラスをつける。

クリックしたボタンのインデックス番号はindexメソッドを使って取得できる。
記述が長くなるので、変数を定義しておくとよい。


それが、var clickedIndex = $('.index-btn').index($(this));の部分。
この記述の意味は、htmlに設置されているindex-btnのクラスのうち、
今クリックされたindex-btn(this)のインデックス番号を取得しなさい。

これをclickedIndexとして定義している。

インデックス番号が分かったので、そのインデックス番号と同じ番号を持った
画像にactiveクラスを追加するようにする。

それが、$('.slide').eq(clickedIndex).addClass('active');の部分。

通常、$('.slide').eq(1).fadeOut();のようにeqメソッドの後には、
インデックス番号の数字が入るが、今回は、上記で、インデックス番号を
変数clicedIndexとして定義したので、eqの後にはclickedIndexが入る。

この記述の意味は、クリックされたボタンのインデックス番号を持つスライドに
activeクラスを追加しなさい。


コメントを残す

メールアドレスが公開されることはありません。