ProgateのjQuery上級のスライドについての質問です。

現在は、ProgateのjQuery上級を学習中です。
が行われて、$displaySlide.removeClass('active'); class="active"を持つものがなくなった後に、$displaySlide.prev().addClass('active');を実行することは可能なのですか？
（var $displaySlide=$('.active');としています。）

$displaySlide.removeClass('active');は、class="active"を持つものから、class="active"を取り除くものだと認識していますが、この考えが間違っているのでしょうか？

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    // 変数$displaySlideを定義してください
10    var $displaySlide=$('.active');
11    
12    // 変数$displaySlideからactiveクラスを取り除いてください
13    $displaySlide.removeClass('active');
14    
15    // ifとelseを用いて、$displaySlideの前もしくは次の要素に
16    // activeクラスをつけてください
17    if($(this).hasClass('next-btn')){
18      $displaySlide.next().addClass('active');
19    }
20    else{
21      $displaySlide.prev().addClass('active');
22    }
23  });
24});
25

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

回答1件

ベストアンサー

$displaySlide.removeClass('active'); が行われて、 class="active" を持つものがなくなった後に、 $displaySlide.prev().addClass('active'); を実行することは可能なのですか？

はい、可能です。なぜならば、 $displaySlide 変数には「その変数が宣言されたときに active クラスが存在する要素」が入っているからです。

$displaySlide.removeClass('active');は、class="active"を持つものから、class="active"を取り除くものだと認識していますが、この考えが間違っているのでしょうか？

いいえ、間違っていません。

投稿2020/02/02 07:43

編集2020/02/02 07:59

s8_chu

総合スコア14731

reo_fukkase

2020/02/02 07:49

すみません、質問の修正をしました

s8_chu

2020/02/02 07:57 編集

大幅に回答文を変更しました。ご確認ください。

reo_fukkase

2020/02/03 06:24

$displaySlide.removeClass('active');を行うことで、activeクラスを持っているものからそれを取り除く ↓ $displaySlide.next().addClass('active');を行うことで、「activeクラスを持っていたもの」のnextにactiveクラスを与えるということでしょうか？

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