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>

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クラスを付け加える

Comments

[kei344]

https://teratail.com/questions/87746 前回の質問時におかしいといわれた点（$('')）がそのままですが、意味がわからなかった、ということでしょうか。

[tanakashouzoux]

コメントありがとうございます。仰る通りです。まだ私の頭が悪く理解できておりません。上のjqueryでどんなことが行われているのかご教示頂けると幸いです

[kei344]

スライドを自作しなければならない事情があるのでしょうか。また、提示されているコードが動かなくて困っておられるのでしょうか。それとも修正することが目的でしょうか。

[tanakashouzoux]

再コメントありがとうございます。目的はコードに書かれている事の理解です。jqueryを独学しているのですが自分のコードに対する理解が間違っていると思うので正して頂きたいと思いますm(__)m

Answer 1

jQueryの $() はざっくり言うとHTMLを扱いやすくするための物です。

$displaySlide.removeClass('active');
```↓
```HTML
<ul class="slides">
  <li class="slide"><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>

console.log( $displaySlide.get(0) ); // <li class="slide">
/* ここの「<li class="slide">」は<li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/spring.jpg"></li>のこと。 */

---

クラスを追加するとこう。

$displaySlide.addClass('test1');
```↓
```HTML
<ul class="slides">
  <li class="slide test1"><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>

でnextを使うと、

$displaySlide.removeClass('test1');
$displaySlide.next().addClass('test2');
```↓
```HTML
<ul class="slides">
  <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/spring.jpg"></li>
  <li class="slide test2"><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>

---

わからない場合はデベロッパーツールで状況を確認してみてください。

【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【Chrome デベロッパーツールの使い方概要 | Web Tips】
http://weback.net/utility/1410/

【第1回 詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

Comments

[tanakashouzoux]

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

回答頂いた中で

$displaySlide.removeClass('active');からhtmlの.activeが無くなったと思うのですが、これはなぜなのでしょうか？

もしli要素からactiveクラスを取り除くのであれば

$('li').removeClass('active');が正しいのではないでしょうか？

[kei344]

変数の概念がわかっておられないようですね。
$displaySlideに入っているのは何だと思っていますか？
$('.active') 以外でお答えください。

[tanakashouzoux]

申し訳ありません

「$displaySlideに$('.active')を割り当てる」という認識しか持ち合わせておりません

$displaySlideには$('.active')しか入ってないと思っております

[kei344]

「$( セレクタ )]で作成されるものはjQueryオブジェクトです。それを書いたタイミングでセレクタを使って取得できるの要素を保持します。要素とはHTMLのタグのことだと思っても良いです。
var x = $('.a');
<p class="a">あいうえお</p>
<p class="b">かきくけこ</p>

x.html( 'さしすせそ' );

<p class="a">さしすせそ</p>
<p class="b">かきくけこ</p>

x.attr( 'id', 'xxx' );

<p class="a" id="xxx">さしすせそ</p>
<p class="b">かきくけこ</p>

x.removeClass( 'a' );
$('.b').addClass( 'a' );

<p id="xxx">さしすせそ</p>
<p class="b a">かきくけこ</p>

xに入っているのは何でしょう。var x = $('.a');のタイミングでaというクラスがあった要素（pの1個目）です。
ここで$('.a');を取得した場合、クラスbとクラスaを持つ要素（pの2個目）が取得されます。

[tanakashouzoux]

何度もご丁寧なご回答をありがとうございます！

もしかして上の回答頂いた

var x = $('.a');
<p class="a">あいうえお</p>
<p class="b">かきくけこ</p>

の「$('.a')」は「<p class="a">あいうえお</p>」を

つまり$('.a')はaをクラスに持つ行（タグ全体？）を表すのですか？？

[kei344]

その解釈でよいと思います。「タグ全体」のほうがより正確だと思います。HTMLはタグとタグの中身、タグの属性で構成されていて、下記の例で言うと「 class="a" id="b"」が「タグの属性」、「あい<span>うえ</span>お」が「タグの中身」になります。属性値や中身が変化してもタグ自体は変わりません。
<p class="a" id="b">あい<span>うえ</span>お</p>

また、下記のような場合 $('.a') には複数の要素が入ります。
<p class="a">あいうえお</p>
<p class="b">かきくけこ</p>
<p class="a c">さしすせそ</p>

var y = $('.a');
y.html( 'たちつてと' );

<p class="a">たちつてと</p>
<p class="b">かきくけこ</p>
<p class="a c">たちつてと</p>

こういう感じで複数のものに一期に処理をできるのもjQueryが便利なところです。
あとはjQueryの入門書とJavaScriptの入門書を買って、トライアンドエラーを繰替えして覚えてください。

[tanakashouzoux]

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

やっと理解出来ました！

私が躓いていたのは$('.a') が「aクラスを持つ全てのタグ全体」ということが分かっていなかったからだと思います

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

kei344さんに1人の初心者が救われました！