JQuery removedClass

Question

HTML
<div class="change-btn prev-btn">← 前へ</div>
  <div class="change-btn next-btn">次へ →</div>
        
        <ul class="slides">
          <li class="slide active"><img src="hoge1.jpg"></li>
          <li class="slide"><img src="hoge2.jpg"></li>
          <li class="slide"><img src="hoge2.jpg"></li>
          <li class="slide"><img src="hoge2.jpg"></li> 
       </ul>

CSS
.slide {
  display: none;
}

.active {
  display: block;
}

Jquery
 $('.change-btn').click(function() {
    
    var $displaySlide = $('.active');
    
    // 変数$displaySlideからactiveクラスを取り除いてください
    
    $displaySlide.removeClass('active');

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

```Jquery スライド切り替えプログラムについて質問


以上のプログラムで簡単なスライド画像の切り替えしているのですが
何故正常に動いているのか理解できません。

簡潔に書きますと
```ここに言語を入力
$displaySlide.removeClass('active'); 
$displaySlide.next().addClass('active');

//activeクラスを取り除いた後に、$displaySlide.nextが正常に機能し、次の要素にactiveが追加できるのかがわかりません。 removeしたあとHTMLにはactiveクラスが存在しないため、nextメソッドがエラーになるのではないでしょうか

よろしくお願いいたします

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

activeクラスを取り除いた後に、$displaySlide.nextが正常に機能し、次の要素にactiveが追加できるのかがわかりません。 removeしたあとの$displaySlideの値は空になっているのではないでしょうか。

removeClassメソッドによってactiveクラスが削除されたとしても**activeクラスが設定されていた要素は残っています**。

var array = ["a", "b", "c"];
var var1 = array[0];
array[0] = "d";
console.log(var1);// a

Comments

[Rin_]

ご回答ありがとうございます。
$displaySlide.removeClass('active');によって
変数$displaySlideの値に変化は怒らないことは理解できました。

$displaySlide.next().addClass('active');　についてなのですが
こちらは HTMLのactiveクラスが付いている要素の次の要素にactiveクラスを付ける　
という風に考えております
とすると先ほどremoveした段階でHTMLにはactiveクラスが存在しないのでエラーになるのではないか
と思っているのですが何か認識を間違っているのでしょうか
お手数ですがよろしくお願いいたします。

[s8_chu]

> 先ほどremoveした段階でHTMLにはactiveクラスが存在しないのでエラーになるのではないか
`removeClassメソッド`を実行しても`変数$displaySlide`の値に変化はなく、**`activeクラス`が設定されていた要素**を指しています。つまり、`$displaySlide.next().addClass('active');`が行っていることを言葉に直すと、「`activeクラス`が設定されていた要素(`$displaySlide`)の次にある要素(`next()`)に`activeクラス`を設定する(`addClass('active')`)」ということになります。

[Rin_]

ご丁寧な回答ありがとうございます。
完全に理解できました。
$displaySlide.removeClass('active');
によって変数の値が変わっていると思っていたこと
>>`activeクラス`が設定されていた要素(`$displaySlide`)
変数にクラスを代入した際の働きについて知識不足でした。

本当にありがとうございます。

Answer 2

removeしたあとHTMLにはactiveクラスが存在しないため

.next()のように空カッコで呼び出すと、無条件に次の要素を取ってきます。

Comments

[Rin_]

ご回答ありがとうございます。
>.next()のように空カッコで呼び出すと、無条件に次の要素を取ってきます。

無条件に次の要素というのは、今回の場合activeクラスの次の要素ということでしょうか？
この段階ではすでにactive要素はremoveされており、存在しないと考えているのですが何か間違えていますでしょうか。

よろしくお願いいたします

[maisumakun]

一度$()で選択すると、最初に選択したときのものがそのまま引き継がれています。途中でremoveClassしても何も変わりません。

また、s8_chuさんの回答にあるように、removeClassしてもクラスが外れるだけで要素は消えません。

[Rin_]

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

お二人のご回答でやっと理解できた気がします。
お世話になりました
これからも何かありましたらよろしくお願いいたします