ProgateのjQreryのコードの書き方について質問です

progateのjQueryを学習しています。
答えのコードの中で、わざわざ変数で定義する必要があるのか疑問に思ったので質問させて頂きました。(** **の間の部分のことです)


### 該当のソースコード



```jQuery
$(function() {
  $('.index-btn').click(function() {
    $('.active').removeClass('active');
    var clickedIndex = $('.index-btn').index($(this));
    $('.slide').eq(clickedIndex).addClass('active');
  });
  
  $('.change-btn').click(function() {
**   // 変数$displaySlideを定義してください
   var $displaySlide = $('.active');
**    
    // 変数$displaySlideからactiveクラスを取り除いてください
    $displaySlide.removeClass('active');
    
    // ifとelseを用いて、$displaySlideの前もしくは次の要素に
    // activeクラスをつけてください
    if ($(this).hasClass('next-btn')) {
      $displaySlide.next().addClass('active');
    } else {
      $displaySlide.prev().addClass('active');
    }
  });
});

###私の意見

この書き方ではいけないのでしょうか？
コードの長さ的にわざわざ定義する必要があるのかと疑問に思いました。

jQuary
1$(function() {
2  $('.index-btn').click(function() {
3    $('.active').removeClass('active');
4    var clickedIndex = $('.index-btn').index($(this));
5    $('.slide').eq(clickedIndex).addClass('active');
6  });
7  
8  $('.change-btn').click(function() {
9   
10    // 変数$displaySlideからactiveクラスを取り除いてください
11    $('.active').removeClass('active');
12    
13    // ifとelseを用いて、$displaySlideの前もしくは次の要素に
14    // activeクラスをつけてください
15    if ($(this).hasClass('next-btn')) {
16      $('.active').next().addClass('active');
17    } else {
18      $('.active').prev().addClass('active');
19    }
20  });
21});

m044

2024/07/15 03:46

私の書き方で何かエラーになるとか不都合があるなら教えて頂きたいです！

行動規範の内容に同意します

回答2件

ベストアンサー

質問者さんのコードだと、結果は同じでも動作速度が遅くなります。$('.active') を実行すると毎回「ドキュメント中のすべての要素から active クラスを持つ要素を探す」という動作をするためです。

質問者さんのコードだと、もとのコードと異なる挙動になります。$('.active') を実行すると毎回「ドキュメント中のすべての要素から active クラスを持つ要素を探す」という動作をするので、最初の $('.active').removeClass('active'); 以降、$('.active') は何にもマッチしなくなり空の jQuery オブジェクトになります。
元のコードだと removeClass() をしても $displaySlide の中身は変わりません。

投稿2024/07/15 09:06

編集2024/07/15 13:28

int32_t

総合スコア21421

m044

2024/07/18 06:43

ご回答ありがとうございます！私のコードだと1つめの動作の時点で .active が removeClass によってなくなってしまい、その後はそのクラス名が存在しないから、前や後ろの要素に .active をつけようにも動かなくなるという感じという解釈で会っていますでしょうか? 答えのコードだと、 removeClass によって .active が消されても先に定義されているからそこも踏まえた上での処理となりちゃんと動作するという感じですか? またその場合、今回みたいなコードを書く場合定義しておくことは必須と捉えておくべきですか? （長いコードを短いものに置き換えるために変数を使うのだと思っていました）　

int32_t

2024/07/18 08:07

すべて yes です。

m044

2024/07/24 03:51

回答ありがとうございます。問題が解決しました！ベストアンサーに選ばせていただきました。

行動規範の内容に同意します

処理的にはこんな感じがベターでは？
prev/nextの仕様をどうしたいか次第ですが・・・・

html
1<style>
2.active{background-Color:red;}
3</style>
4<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
5<script>
6$(function() {
7  $('.index-btn').on('click',function() {
8    $('.active').removeClass('active');
9    var clickedIndex = $('.index-btn').index($(this));
10    $('.slide').eq(clickedIndex).addClass('active');
11  });
12  $('.change-btn').on('click',function() {
13    if($('.active').length){
14      var clickedIndex = ($('.slide').index($('.active'))+$(this).is('.next-btn')*2-1)%$('.slide').length;
15      $('.slide').removeClass('active').eq(clickedIndex).addClass('active');
16    }
17  });
18});
19</script>
20<h2>slide</h2>
21<input type="button" class="index-btn" value="btn1">
22<input type="button" class="index-btn" value="btn2">
23<input type="button" class="index-btn" value="btn3">
24<input type="button" class="index-btn" value="btn4">
25<input type="button" class="index-btn" value="btn5">
26<input type="button" class="change-btn prev-btn" value="prev">
27<input type="button" class="change-btn next-btn" value="next">
28<div class="slide">slide1</div>
29<div class="slide">slide2</div>
30<div class="slide">slide3</div>
31<div class="slide">slide4</div>
32<div class="slide">slide5</div>