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

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

新規登録して質問してみよう
ただいま回答率
85.35%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2656閲覧

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

tanakashouzoux

総合スコア52

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/08/13 00:30

html

1 <div class="slide-wrapper"> 2 <h2 class="slide-title"></h2> 3 <div class="change-btn-wrapper"> 4 <div class="change-btn prev-btn">← 前へ</div> 5 <div class="change-btn next-btn">次へ →</div> 6 </div> 7 <ul class="slides"> 8 <li class="slide active"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/spring.jpg"></li> 9 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/rainy.jpg"></li> 10 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/autumn.jpg"></li> 11 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/winter.jpg"></li> 12 </ul> 13 <div class="index-btn-wrapper"> 14 <div class="index-btn">1</div> 15 <div class="index-btn">2</div> 16 <div class="index-btn">3</div> 17 <div class="index-btn">4</div> 18 </div> 19 </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クラスを付け加える

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/08/13 02:17

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

2017/08/13 04:44

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

2017/08/13 04:59

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

2017/08/13 05:02

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

回答1

0

ベストアンサー

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

JavaScript

1$displaySlide.removeClass('active'); 2```3```HTML 4<ul class="slides"> 5 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/spring.jpg"></li> 6 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/rainy.jpg"></li> 7 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/autumn.jpg"></li> 8 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/winter.jpg"></li> 9</ul>

JavaScript

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

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

JavaScript

1$displaySlide.addClass('test1'); 2```3```HTML 4<ul class="slides"> 5 <li class="slide test1"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/spring.jpg"></li> 6 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/rainy.jpg"></li> 7 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/autumn.jpg"></li> 8 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/winter.jpg"></li> 9</ul>

でnextを使うと、

JavaScript

1$displaySlide.removeClass('test1'); 2$displaySlide.next().addClass('test2'); 3```4```HTML 5<ul class="slides"> 6 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/spring.jpg"></li> 7 <li class="slide test2"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/rainy.jpg"></li> 8 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/autumn.jpg"></li> 9 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/winter.jpg"></li> 10</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 05:21

kei344

総合スコア69606

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tanakashouzoux

2017/08/13 07:11

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

2017/08/13 07:20

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

2017/08/13 07:23

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

2017/08/13 07:44

「$( セレクタ )]で作成されるものは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

2017/08/13 08:45

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

2017/08/13 09:04

その解釈でよいと思います。「タグ全体」のほうがより正確だと思います。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

2017/08/13 10:29

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問