html
1 <div class="slide-wrapper"> 2 <h2 class="slide-title"></h2> 3 <div class="change-btn-wrapper"> 4 <div class="change-btn prev-btn">← 前へ</div> 5 <div class="change-btn next-btn">次へ →</div> 6 </div> 7 <ul class="slides"> 8 <li class="slide active"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/spring.jpg"></li> 9 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/rainy.jpg"></li> 10 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/autumn.jpg"></li> 11 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/winter.jpg"></li> 12 </ul> 13 <div class="index-btn-wrapper"> 14 <div class="index-btn">1</div> 15 <div class="index-btn">2</div> 16 <div class="index-btn">3</div> 17 <div class="index-btn">4</div> 18 </div> 19 </div>
jQuery $('.change-btn').click(function() { var $displaySlide = $('.active'); $displaySlide.removeClass('active'); if ($(this).hasClass('next-btn')) { $displaySlide.next().addClass('active'); } else { $displaySlide.prev().addClass('active'); } });
以前にも一度質問させて頂いたのですが再質問です
jQueryの2行目以降で何をやっているのか(意味しているのか)わかりません
以下、私の考えを書くので間違っているところを指摘修正して頂けると幸いです
①
var $displaySlide = $('.active');
→ 変数$displaySlide に $('.active')を割り当てる;
②
$displaySlide.removeClass('active');
→ $displaySlideから.activeを取り除く(結果①より$displaySlide = $('')・・・☆となる)
③
if ($(this).hasClass('next-btn')) {
$displaySlide.next().addClass('active');
} else {
$displaySlide.prev().addClass('active');
}
→クリックされた要素が「next-btn」クラスを持っていれば(☆より)$('')の次の要素にactiveクラスを付け加え、持っていなければ前の要素にactiveクラスを付け加える
回答1件
あなたの回答
tips
プレビュー