索引号与多张幻灯片相连，不能单独处理

Question

背景

我制作了出现在模态上的幻灯片，其主要功能如下。

• 有“←Prev, Next→”按钮，可以翻页。
• 有页码“1、2、3”，可以翻页。
• 如果显示的页面是第一页或最后一页，则分别隐藏“←Prev, Next→”按钮。

当我只有一张带有下面代码的幻灯片时，这些功能可以正常工作，但最后一个功能现在不适用于多张幻灯片。

幻灯片.html.erb

<ul>
  <li><div data-target="slide01">Slide1</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">Slide1</div>
          <div class="change-btn-wrapper">
            <div class="change-btn prev-btn">← Prev</div>
            <div class="change-btn next-btn">Next →</div>
          </div>
          <ul class="slides">
            <li class="slide active">A</li>
            <li class="slide">B</li>
            <li class="slide">C</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">Slide2</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">Slide2</div>
          <div class="change-btn-wrapper">
            <div class="change-btn prev-btn">← Prev</div>
            <div class="change-btn next-btn">Next →</div>
          </div>
          <ul class="slides">
            <li class="slide active">D</li>
            <li class="slide">E</li>
            <li class="slide">F</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>

幻灯片.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(); 
    });
  })
});

问题

下面的代码检查显示的页面是其索引号的第一个还是最后一个，并分别隐藏“←Prev, Next→”按钮。

幻灯片.js

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

问题在于，当制作多张幻灯片时，这些索引号是相互关联的。 因此，上面的代码只检查第一张幻灯片的第一页和最后一张幻灯片的最后一页。

我试过的

我尝试使用$(this).parents方法来缩小幻灯片的范围，如下所示。 我没有对视图进行任何更改。

幻灯片.js

$(document).on('turbolinks:load', function() {
  $(function() {
    function toggleChangeBtn(dir){
      var dir = $(this).parents('.slide-wrapper'); // Identify the slide.   
      $('.change-btn').show();
      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();
      }
    }

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

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

但是，使用此代码的任何幻灯片中的“←Prev, Next→”按钮都没有正确隐藏。 以及如何在一张幻灯片中显示“←Prev, Next→”按钮也会影响另一张幻灯片。 如果有人给我一些建议，我将不胜感激。

版本

ruby 2.6.4p104 RubyGems 3.0.3 导轨 5.2.3 jquery 1.12.4

Answer 1

如果两个按钮应该相互独立，为什么它们被 if / else if 块依赖？

if (slideIndex == 0) {
  dir.find('.prev-btn').hide();
} else if (slideIndex == dir.find('.slide').length -1) {
  dir.find('.next-btn').hide();
}

要使.prev-btn和.next-btn独立出现/消失，请使这些独立的 if 语句：

var slides = dir.find('.slide');
var slideIndex = slides.length ? slides.dir.index('.active') : 0;
if (slideIndex == 0) {
  dir.find('.prev-btn').hide();
}

if (slides.length <= 1 || slideIndex == slides.length - 1) {
  dir.find('.next-btn').hide();
}