jqueryでスライドを作っている時に躓いて全く進めません・・・
解決済
回答 1
投稿
- 評価
- クリップ 0
- VIEW 905
<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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+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
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 89.99%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
kei344
2017/08/13 11:17
https://teratail.com/questions/87746 前回の質問時におかしいといわれた点($(''))がそのままですが、意味がわからなかった、ということでしょうか。
tanakashouzoux
2017/08/13 13:44
コメントありがとうございます。仰る通りです。まだ私の頭が悪く理解できておりません。上のjqueryでどんなことが行われているのかご教示頂けると幸いです
kei344
2017/08/13 13:59
スライドを自作しなければならない事情があるのでしょうか。また、提示されているコードが動かなくて困っておられるのでしょうか。それとも修正することが目的でしょうか。
tanakashouzoux
2017/08/13 14:02
再コメントありがとうございます。目的はコードに書かれている事の理解です。jqueryを独学しているのですが自分のコードに対する理解が間違っていると思うので正して頂きたいと思いますm(__)m