スライドの次へボタンと前へボタンに使うjQueryで分からないところがあります

Question

コード

   <div class="slide-wrapper">
      <h2 class="slide-title"></h2>
        <div class="change-btn-wrapper">
          <div class="change-btn prev-btn">← 前へ</div>
          <div class="change-btn next-btn">次へ →</div>
        </div>
        <ul class="slides">
          <li class="slide active"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/spring.jpg"></li>
          <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/rainy.jpg"></li>
          <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/autumn.jpg"></li>
          <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/winter.jpg"></li>
        </ul>
        <div class="index-btn-wrapper">
          <div class="index-btn">1</div>
          <div class="index-btn">2</div>
          <div class="index-btn">3</div>
          <div class="index-btn">4</div>  
        </div>
      </div>

コード

 $('.change-btn').click(function() {

    var $displaySlide = $('.active');
    
    $displaySlide.removeClass('active');
    
    if ($(this).hasClass('next-btn')) {
      $displaySlide.next().addClass('active');
    } else {
      $displaySlide.prev().addClass('active');
    }
  });

次へボタンと前へボタンに使うHTMLとjQueryのコードです

質問①
「$displaySlide.removeClass('active');」から
「$displaySlide = $('.active')」の「.active」が取り除かれて「$displaySlide = $('')」になり
「 if ($(this).hasClass('next-btn')) {
$displaySlide.next().addClass('active');
} else {
$displaySlide.prev().addClass('active');
}
」中の「$displaySlide」には「$('')」を入れて考えれば良いのでしょうか？

質問②
もし質問①の考えで合っているのであれば「$('')」に「.nextメソッド」「.prevメソッド」を使うことになるのは変じゃないでしょうか？

Comments

[x_x]

どちらも1のようですが、後者が2でしょうか？

[tanakashouzoux]

ありがとうございます！修正しました！

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

[tanakashouzoux]

ありがとうございます。一旦解決済みにしたいと思いますm(__)m

Answer 1

「$displaySlide = $('.active')」の「.active」が取り除かれて「$displaySlide = $('')」になり

ええと、言葉遊びではないので$('')にはなりません。
'active'というクラスがあった要素ノード(を指すjQueryオブジェクト)が依然として保持されています。

Comments

[tanakashouzoux]

わざわざご回答ありがとうございます

当方勉強し始めの初心者でして、変な質問で申し訳ありません(;´･ω･)

「'active'というクラスがあった要素ノード(を指すjQueryオブジェクト)が依然として保持されています」とは一体どういったことなのでしょうか？

「$displaySlide.removeClass('active');」は「$displaySlide = $('.active')」から「.active」を取り除く（←removeClass(active)）という意味だと認識していたのですが、間違っておりますでしょうか？

[x_x]

変数の中身を変えるものではなく、DOM操作(<li class="slide active"></li>を<li class="slide"></li>)をしているものです。
$displaySlideが、その要素(<li class="slide"></li>)を指していることは変わらないのです

[tanakashouzoux]

何度も解答して頂きありがとうございますm(__)m

今回の$displaySlideは「$('.active')」ではなく「<li class="slide active"></li>」を指しているのでしょうか？

そうなのであればどこから「<li class="slide active"></li>」を指していると見分けるのでしょうか？

[x_x]

説明難しいですね。こんな風に考えたことはないので。
さて、クリックされるとfunctionの中身が上から順に実行されていきますが、$displaySlideに代入されるのは一回だけです。

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

これ以外に変更されることはありません。
このとき'active'を選び取りますが、その後'active'でなくなっても関係ないのです。

[tanakashouzoux]

わざわざたくさん回答して頂きありがとうございます！

私が不勉強すぎました・・・

この辺の事を解説しているサイトや書籍がありましたらご教示頂けないでしょうか？

[x_x]

検索して適当なところを挙げてみます。
なぜ日本人はオブジェクト指向をなかなか理解できないのか？
http://gihyo.jp/book/pickup/2012/0057
JavaScript初級者から中級者になろう 二章 DOMの基礎
http://uhyohyo.net/javascript/2_1.html

[tanakashouzoux]

ご丁寧にありがとうございます

私はとんでもない田舎に住んでおりまして書籍を中心に勉強しているのですが分からないところが聞けず悩んでおりました

今回回答頂き本当にうれしかったです！

ありがとうございました！

また機会がありましたらご教示下さいませm(__)m