teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

5

修正

2020/02/02 07:59

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
@@ -1,7 +1,7 @@
1
1
  > $displaySlide.removeClass('active'); が行われて、 class="active" を持つものがなくなった後に、 $displaySlide.prev().addClass('active'); を実行することは可能なのですか?
2
2
 
3
3
 
4
- はい、可能です。なぜならば、 `$displaySlide` 変数には「その変数が宣言されたときに `active` クラスが存在する要素」が入っているからです。
4
+ はい、可能です。なぜならば、 `$displaySlide` 変数には「その変数が宣言されたときに `active` クラスが存在する要素」が入っているからです。
5
5
 
6
6
  > $displaySlide.removeClass('active');は、class="active"を持つものから、class="active"を取り除くものだと認識していますが、この考えが間違っているのでしょうか?
7
7
 

4

修正

2020/02/02 07:58

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
File without changes

3

修正

2020/02/02 07:56

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
@@ -1,40 +1,8 @@
1
- > $displaySlide.prev().addClass('active');が行われて、class="active"を持つものがなくなった後に、$displaySlide.prev().addClass('active');を実行することは可能なのですか?
1
+ > $displaySlide.removeClass('active'); が行われて、 class="active" を持つものがなくなった後に、 $displaySlide.prev().addClass('active'); を実行することは可能なのですか?
2
2
 
3
- はい、実行されています。
4
3
 
4
+ はい、可能です。なぜならば、 `$displaySlide` 変数には、「その変数が宣言されたときに `active` クラスが存在する要素」が入っているからです。
5
5
 
6
- > $displaySlide.prev().addClass('active');は、class="active"を持つものから、class="active"を取り除くものだと認識していますが、この考えが間違っているのでしょうか?
6
+ > $displaySlide.removeClass('active');は、class="active"を持つものから、class="active"を取り除くものだと認識していますが、この考えが間違っているのでしょうか?
7
7
 
8
- い、間違っていまそのコードは「`$displaySlide` の前に存在する要素へ `active` クラスを追加する」だけです。質問文のコードにおいて、 `active` クラスを取り除く処理は `removeClass` メソッドで行われています。
9
-
10
-
11
-
12
- もし「最初または最後のスライドで前または次のスライドを表示しようとしたとき、最後または最初のスライドを表示したい」のであれば、 `prev`, `next` メソッドが返す jQuery オブジェクトの `length` プロパティが 0 かどうかによって、それぞれのメソッドで前 (もしくは次) の要素を取得したかの判定を行い、どの要素へ `active` クラスを付与するかを変更することで実現出来ます ([動作確認用リンク](https://jsfiddle.net/mfyrg9q1/))。
13
-
14
- ```jQuery
15
- $(function() {
16
- $('.index-btn').click(function() {
17
- $('.active').removeClass('active');
18
- var clickedIndex = $('.index-btn').index($(this));
19
- $('.slide').eq(clickedIndex).addClass('active');
20
- });
21
-
22
- $('.change-btn').click(function() {
23
- // 変数$displaySlideを定義してください
24
- var $displaySlide = $('.active');
25
-
26
- // 変数$displaySlideからactiveクラスを取り除いてください
27
- $displaySlide.removeClass('active');
28
-
29
- // ifとelseを用いて、$displaySlideの前もしくは次の要素に
30
- // activeクラスをつけてください
31
- if ($(this).hasClass('next-btn')) {
32
- const next = $displaySlide.next();
33
- (next.length ? next : $("li.slide").first()).addClass('active')
34
- } else {
35
- const prev = $displaySlide.prev();
36
- (prev.length ? prev : $("li.slide").last()).addClass('active')
37
- }
38
- });
39
- });
40
- ```
8
+ いえ、間違っていません

2

修正

2020/02/02 07:56

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  > $displaySlide.prev().addClass('active');は、class="active"を持つものから、class="active"を取り除くものだと認識していますが、この考えが間違っているのでしょうか?
7
7
 
8
- いえ、間違っています。`$displaySlide` の前に存在する要素へ `active` クラスを追加するだけです。質問文のコードにおいて、 `active` クラスを取り除く処理は `removeClass` メソッドで行われています。
8
+ い、間違っています。そのコードは「`$displaySlide` の前に存在する要素へ `active` クラスを追加するだけです。質問文のコードにおいて、 `active` クラスを取り除く処理は `removeClass` メソッドで行われています。
9
9
 
10
10
 
11
11
 
@@ -28,8 +28,6 @@
28
28
 
29
29
  // ifとelseを用いて、$displaySlideの前もしくは次の要素に
30
30
  // activeクラスをつけてください
31
-
32
-
33
31
  if ($(this).hasClass('next-btn')) {
34
32
  const next = $displaySlide.next();
35
33
  (next.length ? next : $("li.slide").first()).addClass('active')

1

修正

2020/02/02 07:46

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
@@ -28,13 +28,13 @@
28
28
 
29
29
  // ifとelseを用いて、$displaySlideの前もしくは次の要素に
30
30
  // activeクラスをつけてください
31
-
32
-
31
+
32
+
33
33
  if ($(this).hasClass('next-btn')) {
34
- const next = $displaySlide.next();
34
+ const next = $displaySlide.next();
35
35
  (next.length ? next : $("li.slide").first()).addClass('active')
36
36
  } else {
37
- const prev = $displaySlide.prev();
37
+ const prev = $displaySlide.prev();
38
38
  (prev.length ? prev : $("li.slide").last()).addClass('active')
39
39
  }
40
40
  });