Progate　jQueryのnext/prevメソッドについて

ProgateのjQuery学習コースの上級編で、
next/prevメソッドについての演習でわからないところがあります。
(似たような質問もあり、拝見しましたが解決できませんでした)

jQueryのコメント内の疑問1と2について教えてください。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>Progate</title>
6    <link rel="stylesheet" href="stylesheet.css">
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
8  </head>
9  <body>
10    <div class="slide-wrapper">
11      <h2 class="slide-title">にんじゃわんこの一年</h2>
12        <div class="change-btn-wrapper">
13          <div class="change-btn prev-btn">← 前へ</div>
14          <div class="change-btn next-btn">次へ →</div>
15        </div>
16        <ul class="slides">
17          <li class="slide active"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/spring.jpg"></li>
18          <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/rainy.jpg"></li>
19          <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/autumn.jpg"></li>
20          <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/winter.jpg"></li>
21        </ul>
22        <div class="index-btn-wrapper">
23          <div class="index-btn">1</div>
24          <div class="index-btn">2</div>
25          <div class="index-btn">3</div>
26          <div class="index-btn">4</div>  
27        </div>
28      </div>
29    <script type="text/javascript" src="script.js"></script>
30  </body>
31</html>

CSS
1body {
2  font-family: "Hiragino Maru Gothic ProN", sans-serif;
3}
4
5ul {
6  list-style: none;
7}
8
9.slide-wrapper {
10  text-align: center;
11  width: 1000px;
12  margin: 0 auto;
13  color: #5e6f84;
14  padding: 60px 0;
15}
16
17.slide-title {
18  font-size: 40px;
19  margin-bottom: 30px;
20}
21
22.change-btn-wrapper {
23  width: 500px;
24  margin: 20px auto;
25  font-size: 18px;
26}
27
28.change-btn-wrapper:after {
29  content: "";
30  clear: both;
31  display: block;
32}
33
34.prev-btn {
35  cursor: pointer;
36  float: left;
37}
38
39.next-btn {
40  cursor: pointer;
41  float: right;
42}
43
44.slides {
45  padding: 0;
46}
47
48.slide {
49  display: none;
50}
51
52.active {
53  display: block;
54}
55
56.slide img {
57  width: 500px;
58  height: auto;
59  border-radius: 5px;
60}
61
62.index-btn-wrapper {
63  font-size: 16px;
64  margin-top: 20px;
65}
66
67.index-btn {
68  display: inline-block;
69  color: #4e90af;
70  background-color: #e0f5ff;
71  width: 40px;
72  padding: 6px 0;
73  margin: 0 5px;
74  border-radius: 3px;
75  cursor: pointer;
76}
77
78.index-btn:hover {
79  color: #fff;
80  background-color: #5cabd0;
81}

jQuery
1$(function() {
2  $('.index-btn').click(function() {
3    $('.active').removeClass('active');
4    var clickedIndex = $('.index-btn').index($(this));
5    $('.slide').eq(clickedIndex).addClass('active');
6  });
7  
8  $('.change-btn').click(function() {
9    
10    var $displaySlide = $('.active');
11    
12    
13    $displaySlide.removeClass('active');
14   //疑問1.HTMLの一番上にある一枚目のslideからactiveクラスを取るという意味？＝activeクラスのついていない状態の1枚目のslideのこと？
15   
16    if ($(this).hasClass('next-btn')) {
17      
18      $displaySlide.next().addClass('active');
19      //疑問2.一枚目のスライドの次(上から二番目にあるslideのこと？)のスライドにactiveクラスをつけるという意味？であれば、なぜnext-btnをクリックし続けると3枚目、4枚目も表示されるのでしょうか？(クリック→一枚目→二枚目の挙動で終了せず、その後も挙動が続くのはなぜでしょうか？)
20    } else {
21      
22      $displaySlide.prev().addClass('active');
23      
24    }
25    
26  });
27});
28

m.ts10806

2020/05/04 22:21

「似たような質問」のURLをリンクで提示してください。また、デバッグで分かることもあるかと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

まずこれは現在表示されているスライドを指します

jQuery
1var $displaySlide = $('.active');

これは現在表示されているスライドから.activeを取り除いています（スライド非表示）

jQuery
1$displaySlide.removeClass('active');

これは現在の表示スライドの次のスライド（兄弟要素）に.activeを付与しスライドを表示します

jQuery
1$displaySlide.next().addClass('active');

投稿2020/05/04 14:55

akkman

総合スコア254

dorachan1293

2020/05/04 15:01

ご回答ありがとうございます。 ```jQuery var $displaySlide = $('.active'); ``` HTMLでは、一番上のスライドだけにactiveクラスをつけましたが、なぜ上記で現在表示されているスライドを指すのでしょうか？？

akkman

2020/05/04 16:32

スライドはdisplay:none;の状態がデフォルトになり、 .actionが付くとdisplay:block;があたりスライドが表示されるようになってます

dorachan1293

2020/05/05 00:46

その.activeのCSSがあたるのは、.activeクラスがついた一番上のスライド一枚だけではないのでしょうか？？その一枚目からnextで２枚目にactiveクラスがつくのはわかるのですが、上記カードで3,4枚目にまでつくのがわかりません...

akkman

2020/05/05 00:54

最初は1枚目のスライドについてますが、 $displaySlide.next().addClass('active'); この処理をすることで2枚目、3枚目というように移動していきます

dorachan1293

2020/05/05 01:15

それは、nextメソッドに繰り返す挙動が含まれているということでしょうか？？

dorachan1293

2020/05/05 02:16

あ、nextメソッドではなく、clickするごとにclickイベントが発生して、removeClass→$displaySlide.next().addClass('active');によってactiveクラスが移動していくということですかね？？

akkman

2020/05/05 02:17

そうです

dorachan1293

2020/05/05 02:49

やっとわかりました！ご丁寧に教えてくださり、ありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Progate　jQueryのnext/prevメソッドについて

関連した質問