jqueryでスライドを作っている時に躓いて全く進めません・・・

Question

jqueryでスライドを作っている時に躓いて全く進めません・・・

解決済

回答 1

投稿 2017/08/13 09:30

評価
クリップ 0
VIEW 905

tanakashouzoux

score 31

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

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

評価を下げられる数の上限に達しました

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

この機能は開放されていません

評価を下げる条件を満たしてません

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問広告と受け取られるような投稿
詳細な説明はこちら

上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。
質問の評価を下げる機能の利用条件

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

4 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

kei344

2017/08/13 11:17

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

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

キャンセル
tanakashouzoux

2017/08/13 13:44

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

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

キャンセル
kei344

2017/08/13 13:59

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

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

キャンセル
tanakashouzoux

2017/08/13 14:02

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

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

キャンセル

回答 1 件

評価が高い順
新着順
古い順

同じタグがついた質問を見る

jQuery

score 2 · Accepted Answer · 2017-08-13T14:21

ベストアンサー

+2

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

$displaySlide.removeClass('active');

↓

<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');

↓

<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');

↓

<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

投稿 2017/08/13 14:21

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2017/08/13 16:11

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

回答頂いた中で

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

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

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

ご回答ありがとうございます回答頂いた中で $displaySlide.removeClass('active');からhtmlの.activeが無くなったと思うのですが、これはなぜなのでしょうか？もしli要素からactiveクラスを取り除くのであれば $('li').removeClass('active');が正しいのではないでしょうか？

キャンセル
2017/08/13 16:20

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

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

キャンセル
2017/08/13 16:23

申し訳ありません

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

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

申し訳ありません「$displaySlideに$('.active')を割り当てる」という認識しか持ち合わせておりません $displaySlideには$('.active')しか入ってないと思っております

キャンセル
2017/08/13 16:44

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

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

さしすせそ
かきくけこ

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

さしすせそ
かきくけこ

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

さしすせそ
かきくけこ

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

「$( セレクタ )]で作成されるものはjQueryオブジェクトです。それを書いたタイミングでセレクタを使って取得できるの要素を保持します。要素とはHTMLのタグのことだと思っても良いです。 var x = $('.a'); あいうえお かきくけこ x.html( 'さしすせそ' ); さしすせそ かきくけこ x.attr( 'id', 'xxx' ); さしすせそ かきくけこ x.removeClass( 'a' ); $('.b').addClass( 'a' ); さしすせそ かきくけこ xに入っているのは何でしょう。var x = $('.a');のタイミングでaというクラスがあった要素（pの1個目）です。ここで$('.a');を取得した場合、クラスbとクラスaを持つ要素（pの2個目）が取得されます。

キャンセル
2017/08/13 17:45

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

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

var x = $('.a');
あいうえお
かきくけこ

の「$('.a')」は「あいうえお」を

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

何度もご丁寧なご回答をありがとうございます！もしかして上の回答頂いた var x = $('.a'); あいうえお かきくけこ の「$('.a')」は「あいうえお」をつまり$('.a')はaをクラスに持つ行（タグ全体？）を表すのですか？？

キャンセル
2017/08/13 18:04

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

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

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

たちつてと
かきくけこ
たちつてと

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

その解釈でよいと思います。「タグ全体」のほうがより正確だと思います。HTMLはタグとタグの中身、タグの属性で構成されていて、下記の例で言うと「 class="a" id="b"」が「タグの属性」、「あいうえお」が「タグの中身」になります。属性値や中身が変化してもタグ自体は変わりません。 あいうえお また、下記のような場合 $('.a') には複数の要素が入ります。 あいうえお かきくけこ さしすせそ var y = $('.a'); y.html( 'たちつてと' ); たちつてと かきくけこ たちつてと こういう感じで複数のものに一期に処理をできるのもjQueryが便利なところです。あとはjQueryの入門書とJavaScriptの入門書を買って、トライアンドエラーを繰替えして覚えてください。

キャンセル
2017/08/13 19:29

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

やっと理解出来ました！

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

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

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

ご回答ありがとうございます！やっと理解出来ました！私が躓いていたのは$('.a') が「aクラスを持つ全てのタグ全体」ということが分かっていなかったからだと思います本当にありがとうございました！ kei344さんに1人の初心者が救われました！

キャンセル

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

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

jqueryでスライドを作っている時に躓いて全く進めません・・・

関連した質問

同じタグがついた質問を見る

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

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

jqueryでスライドを作っている時に躓いて全く進めません・・・

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

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン