複数のスライドで、ページのインデックス番号が繋がってしまう。

Question

前提・実現したいこと

モーダルにて表示されるスライド機能を作成致しました。
スライドの大まかな機能としては以下の通りです。

• 「←前へ」「次へ→」のボタンがあり、クリックすると表示されるページが切り替わる。
• 1, 2, 3のページ番号もあり、クリックすると該当のページに表示が切り替わる。
• スライドが最初か最後のページである場合、「←前へ」「次へ→」ボタンの表示がそれぞれ消える。

スライドが一つしかない場合は下記のコードで問題なく実装出来ていたのですが、スライドを2つ以上に増やすと最後の項目が上手く機能しなくなりました。

slide.html.erb

<ul>
  <li><div data-target="slide01">スライド1</div>
    <div id="slide01" class="modal-wrapper">
      <div class="modal">
        <div class="close-modal">
          <i class="fa fa-2x fa-times"></i>
        </div>
        <div class="slide-wrapper">
          <div class="slide-title">スライド1</div>
          <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">あ</li>
            <li class="slide">い</li>
            <li class="slide">う</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> 
        </div>
      </div>
    </div>
  </li>   

  <li><div data-target="slide01">スライド2</div>
    <div id="slide01" class="modal-wrapper">
      <div class="modal">
        <div class="close-modal">
          <i class="fa fa-2x fa-times"></i>
        </div>
        <div class="slide-wrapper">
          <div class="slide-title">スライド2</div>
          <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">か</li>
            <li class="slide">き</li>
            <li class="slide">く</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> 
        </div>
      </div>
    </div>
  </li> 
</ul>

slide.js

$(document).on('turbolinks:load', function() {
  $(function() {
    function toggleChangeBtn(){
      var slideIndex = $('.slide').index($('.active'));
      $('.change-btn').show();
      if (slideIndex == 0) {
        $('.prev-btn').hide();
      } else if (slideIndex == $('.slide').length -1) {
        $('.next-btn').hide();
      }

    $('.index-btn').click(function() {
      $('.active').removeClass('active');
      var clickedIndex = $('.index-btn').index($(this));
      $('.slide').eq(clickedIndex).addClass('active');
      toggleChangeBtn();
    });

    $('.change-btn').click(function() {
      var $displaySlide = $('.active');
      $displaySlide.removeClass('active');
      if ($(this).hasClass('next-btn')) {
        $displaySlide.next().addClass('active');
      }
      else {
        $displaySlide.prev().addClass('active');
      }
      toggleChangeBtn(); 
    });
  })
});

発生している問題

以下の記述により、インデックス番号を取得する事でスライドが最初か最後のページである場合を判断し、「←前へ」「次へ→」ボタンの表示をそれぞれ消しています。

slide.js

var slideIndex = $('.slide').index($('.active'));
$('.change-btn').show();
if (slideIndex == 0) {
  $('.prev-btn').hide();
} else if (slideIndex == $('.slide').length -1) {
  $('.next-btn').hide();
}

しかしタイトルにもありますが、スライドを複数にした事でページのインデックス番号が繋がってしまったようなのです。結果としてスライド内でページを遷移しても、思い通りに「←前へ」「次へ→」ボタンの表示が消えてくれません。

以下のコードでインデックス番号を確かめましたが、実際に繋がってしまっていました。

slide.html.erb

<li class="slide" id="ki">き</li>

slide.js

$(function() {
  var number = $('#ki');
  var i = $('.slide').index(number); 
  alert(i)
});

=> 4

スライド1：「あ、い、う」の3ページ。スライド2：「か、き、く」の3ページ。
「き」のインデックス番号として1(0, 1の2番目)を期待していましたが、4(0, 1, 2, 3, 4の5番目)とアラートが出てしまいました。

試したこと

インデックス番号をそれぞれのスライドで切り分ける方法がどうしても分かりませんでしたので、代わりに以下の方法を試みました。

1. ビュー側にて最初及び最後のページに firstPage、lastPageなるクラスを各スライドに付与する。
2. 表示されているのが最初のページの場合「前へ」ボタンを、最後のページの場合「次へ」ボタンをそれぞれ非表示にする。

slide.js

var currentPage = $('.active');
if (currentPage.hasClass('firstPage')) {
  $('.prev-btn').hide();
} else if (currentPage.hasClass('lastPage')) {
  $('.next-btn').hide();
}

しかし後半で「ページ番号をクリックした際に .active クラスが付いていたスライドから .active を取り除く」と言った処理もある為、他のスライドの .active クラスも一緒に取り除かれてしまい、クリックした際に何も表示されなくなってしまいます。

slide.js

$('.index-btn').click(function() {
  $('.active').removeClass('active');
  var clickedIndex = $('.index-btn').index($(this));
  $('.slide').eq(clickedIndex).addClass('active');
  toggleChangeBtn();
});

インデックス番号をそれぞれのスライドで切り分ける方法があれば一番スマートかなと思うのですが、何か良い方法はありませんでしょうか。ご助言を頂けますと有難いです。

補足情報（FW/ツールのバージョンなど）

ruby 2.6.4p104
RubyGems 3.0.3
Rails 5.2.3
jquery 1.12.4

追記

ご回答を元にしたコードを追記致します。
ページの中身は独立して（他のスライドに依存する事なく）表示されるようになったものの、「←前へ　次へ→」ボタンのみまだ他のスライドでの動作と連動して表示されてしまいます。

slide.html.erb

<ul>
  <li><div data-target="slide01" class="click-modal">スライド1</div>
    <div id="slide01" class="modal-wrapper">
      <div class="modal">
        <div class="close-modal">
          <i class="fa fa-2x fa-times"></i>
        </div>
        <div class="slide-wrapper">
          <div class="slide-title">スライド1</div>
          <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 firstSlide active">あ</li>
            <li class="slide">い</li>
            <li class="slide lastSlide">う</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> 
        </div>
      </div>
    </div>
  </li>   

  <li><div data-target="slide02" class="click-modal">スライド2</div>
    <div id="slide02" class="modal-wrapper">
      <div class="modal">
        <div class="close-modal">
          <i class="fa fa-2x fa-times"></i>
        </div>
        <div class="slide-wrapper">
          <div class="slide-title">スライド2</div>
          <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 firstSlide active">か</li>
            <li class="slide">き</li>
            <li class="slide lastSlide">く</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> 
        </div>
      </div>
    </div>
  </li> 
</ul>

slide.js

$(document).on('turbolinks:load', function() {
  $(function() {
    function toggleChangeBtn(dir){
      var dir = $(this).parents('.slide-wrapper'); //対象のクラスを絞りたいが、絞れていない？    
      var currentSlide = dir.find('.active'); // 表示されているスライドをcurrentSlideと名付ける。
      $('.change-btn').show(); // 「前へ」と「次へ」は常に表示する。
      if (currentSlide.hasClass('firstSlide')) {
        dir.find('.prev-btn').hide(); // 表示されているスライドが最初のページの場合「前へ」は非表示。
      } else if (currentSlide.hasClass('lastSlide')) {
        dir.find('.next-btn').hide(); // 表示されているスライドが最後のページの場合「次へ」は非表示。
      }
    }

    $('.index-btn').click(function() {
      var dir = $(this).parents('.slide-wrapper'); //対象のクラスを絞る。   
      dir.find('.active').removeClass('active'); // 表示されていたスライドから.activeを取り除く。
      var clickedIndex = $('.index-btn').index($(this));
      $('.slide').eq(clickedIndex).addClass('active'); // クリックされたページ番号と同じインデックス番号を持つスライドに.activeを付与する。
      toggleChangeBtn(dir);
    });

    $('.change-btn').click(function() {
      var dir = $(this).parents('.slide-wrapper'); //対象のクラスを絞る。
      var $displaySlide = dir.find('.active'); // 表示されているスライドをdisplaySlideと名付ける。
      $displaySlide.removeClass('active'); // .activeが付いていたスライドから.activeを取り除く。
      if ($(this).hasClass('next-btn')) {
        $displaySlide.next().addClass('active'); // .next-btnクラスがついていたら、その次のスライドにactiveを付与する。
      }
      else {
        $displaySlide.prev().addClass('active'); // .prev-btnクラスがついていたら、その前のスライドにactiveを付与する。
      }
      toggleChangeBtn(dir); 
    });
  })
});

Answer 1

$(this)を使って対象となるセレクタだけを制御すればいいのではないかと思います。
このイベント制御だと同じクラスの全セレクタが対象となってしまってますよ。

このようにparentsメソッドを使って対象のセレクタの範囲を絞るといいでしょう。

    $('.change-btn').on("click",function() {
	 var dir = $(this).parents('.slide-wrapper'); //対象のクラスを絞る
     //省略
      toggleChangeBtn(dir); //対象のセレクタを関数の引数とする
     //省略

これでテストしてうまくいってます。

Comments

[punchan36]

有難うございます！ご回答を元に試行錯誤しております。

元のコードではなく「試したこと」に記載致しましたコードを $(this) を使いながら改良しているのですが、まずそちらの理解で合っておりますでしょうか。

var currentSlide = $('.active');
この定義のせいで、'.active'クラスが付いている他のスライドのページにまで変更を加えてしまっているのは理解出来ます。

これを「今表示されているスライド」と言う定義にしたいのですが、そこがよく分かりません…。

[punchan36]

有難うございます！
まだ上手く動いてくれません。状況を追記致しましたので、可能でありましたらご助言頂けますと有難いです。

[FKM]

dirはその選択したセレクタなので、それの下にある子要素は全部dirで縛っていく必要があります。
なので変数dirは関数にも引数として持ち運んでください。その関数内にあるslideクラスやactiveクラス、それにprev-bthクラス、next-btnクラスもそのdirセレクタの子孫要素である必要があります。

単体だとうまくいったのに、複数だとうまくいかなくなったということは、つまり、選択した親要素配下の子孫要素だけをうまく絞れていないということです。

[punchan36]

有難うございます！ご指摘を頂いてから間違いに気が付きました。
二つの関数に引数を指定する事で動かす対象を「表示したスライドのみ」に絞り込んだつもりなのですが、まだ動きが以前と変わりません…。理解したつもりでしたが、どこかおかしかったでしょうか。。
飲み込みが悪く、何度も申し訳ありません。

ビューファイルは特にいじっておらず、修正したjsコードのみ追記内で編集致しました。

[FKM]

toggleChangeBtn(dir){…}としないと、dirセレクタを持っていけませんよ。

[punchan36]

有難うございます。
まだ試行錯誤しております…。

今回改めて引数を使った事で、toggleChangeBtnの処理が指定したクラスの範囲内で行われていると思います（追記内のslide.jsを再度編集致しました）。
ただ結果が変わらないのは、ページ番号や次へボタンを押したときの「.activeクラスを取り除く」と言った処理が依然として他のセレクタも含んでしまっているからなのでしょうか…。

[FKM]

.activeの部分も全部dirの下にあるはずなので、dir.find('.active')…と記述しないといけません。とにかく、slide-wrapperの子孫にあるものは全部dirに紐付けられる要素です。よその親の子孫をもらってはいけません。

[punchan36]

有難うございます！
これでページの中身は独立して（他のスライドに依存する事なく）表示されるようになりました！

ただ一点だけ、「←前へ　次へ→」ボタンのみまだ他のスライドでの動作と連動して表示されてしまいます。
toggleChangeBtn関数内の動作も「表示したスライドのみ」に絞り込んで行いたいのですが、恐らくこの関数がクリックイベントではない為 $(this) を認識してくれていないのかなと思いました…。

何か良い記述の仕方はありませんでしょうか…？（現在のコードを追記内にて記述致しました。）

[FKM]

2つのボタンもdirの子孫です。

[punchan36]

「前へ」と「次へ」に関する記述を以下の様に書き換えましたがダメです…。こう言う事ではないのでしょうか…？

if (currentSlide.hasClass('firstSlide')) {
dir.find('.prev-btn').hide();
} else if (currentSlide.hasClass('lastSlide')) {
dir.find('.next-btn').hide();
}

[FKM]

ifの判定文を一番初期の状態に戻して下さい。

[punchan36]

最初に書いたif文とはこちらでしょうか…これで同様に動かなかったのですが。。
var currentSlide = dir.find('.active');
if (currentSlide.hasClass('firstSlide')) {
$('.prev-btn').hide();
} else if (currentSlide.hasClass('lastSlide')) {
$('.next-btn').hide();
}

こちらの事ではないですよね。意図が読み取れず申し訳ありません。
var slideIndex = dir.find('.slide').index($('.active'));
if (slideIndex == 0) {
dir.find('.prev-btn').hide();
} else if (slideIndex == $('.slide').length -1) {
dir.find('.next-btn').hide();
}

[FKM]

下の方で間違いないですが、今まで自分がアドバイス送ったことをよく注意して振り返れば、そのif判定文も問題があることはわかるはずです。

dirは何のために指定したのか、それは複数あるslide-wrapperクラスから一つだけ絞り込むためです。なので、そのslide-wrapperクラスの子孫にあるクラスは全部絞り込む必要があります。

[punchan36]

以下の様に slide-wrapper 以下の全てのクラスを dir で絞り込んだつもりですが、まだ動きません…。
おかしな箇所がありますでしょうか。ここまで一歩一歩になってしまい本当に申し訳ありません。

var dir = $(this).parents('.slide-wrapper');
var slideIndex = dir.find('.slide').dir.index('.active');
if (slideIndex == 0) {
dir.find('.prev-btn').hide();
} else if (slideIndex == dir.find('.slide').length -1) {
dir.find('.next-btn').hide();
}