【progate jquery 上級編】　indexメソッド

ろん

課題：変数clickedIndexを用意し、indexメソッドとthisを用いて、クリックしたindex-btn要素のインデックス番号を代入してください。​

①クリックされたボタンのインデックス番号を取得

・varを付けることで、変数を宣言することができる。変数名は$(ドルマーク）を添えて。

    var clickedIndex =$('.index-btn').index($(this));

ここでの$(this)は、「クリックイベントが発生したindex-btn要素」という意味。

まとめて訳すと、「クリックイベントが発生したindex-btn要素」は、これからclickedIndexにして表しますよー！

②インデックス番号と対応するスライドを表示

先ほど変数を宣言した理由は、クリックされた番号のスライドを表示させるためだったのか！

クリックされた番号に対応するスライドは、activeクラスが付くように設定。

    $('.slide').eq(clickedIndex).addClass('active');

元々cssでは、下記のように記載されています。なので、.slideだけの場合は非表示なのに、.activeが付与されると表示されるようになるのです。

.slide {
 display: none;
}

.active {
 display: block;
}

参考サイト



この記事が気に入ったらサポートをしてみませんか？