【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;
}
参考サイト
この記事が気に入ったらサポートをしてみませんか?