关于多组rb-slider导航按钮仅控制最后一组幻灯片的技术求助

Hey Pascal, I’ve run into this exact issue before—when you reuse components like slideshows, global variables end up messing with all instances at once. Let’s break down why your current code isn’t working and fix it step by step.

The Problem #

Your slideIndex is a global variable, and document.getElementsByClassName("rbSlide") grabs all slides on the page. So no matter which button you click, you’re updating that single global index and hiding/showing every slide—only the last set ends up visible because it’s the last one processed.

The Solution #

We need to give each slideshow its own independent state, and make sure buttons only affect their parent slideshow. Here’s how to adjust your code:

Updated HTML

We’ll modify the button onclick handlers to pass a reference to the button itself, so we can find its parent slideshow:

<div class="box"> 
  <div class="rb-style pile"> 
    <div class="col-md-6"> 
      <h3>SLIDE ONE</h3> 
      <p>TEXT</p> 
    </div> 
    <div class="col-md-6 rb-slider"> 
      <div class="rbSlide"> 
        <img src="img/xxx.jpg" alt="xxx"> 
        <div class="rb-caption"> Trolltunga, Norway </div> 
      </div> 
      <div class="rbSlide"> 
        <img src="img/xxx.jpg" alt="xxx"> 
        <div class="rb-caption"> Trolltunga, Norway </div> 
      </div> 
      <div class="rbSlide"> 
        <img src="img/xxx.jpg" alt="xxx"> 
        <div class="rb-caption"> Trolltunga, Norway </div> 
      </div> 
      <button class="rb-btn rb-left" onclick="plusDivs(this, -1)">&#10094;</button> 
      <button class="rb-btn rb-right" onclick="plusDivs(this, 1)">&#10095;</button> 
    </div> 
  </div> 
  <div class="rb-style pile"> 
    <div class="col-md-6"> 
      <h3>SLIDE TWO</h3> 
      <p>TEXT</p> 
    </div> 
    <div class="col-md-6 rb-slider"> 
      <div class="rbSlide"> 
        <img src="img/xxx.jpg" alt="xxx"> 
        <div class="rb-caption"> Trolltunga, Norway </div> 
      </div> 
      <div class="rbSlide"> 
        <img src="img/xxx.jpg" alt="xxx"> 
        <div class="rb-caption"> Trolltunga, Norway </div> 
      </div> 
      <div class="rbSlide"> 
        <img src="img/xxx.jpg" alt="xxx"> 
        <div class="rb-caption"> Trolltunga, Norway </div> 
      </div> 
      <button class="rb-btn rb-left" onclick="plusDivs(this, -1)">&#10094;</button> 
      <button class="rb-btn rb-right" onclick="plusDivs(this, 1)">&#10095;</button> 
    </div> 
  </div> 
</div>

Updated JavaScript

Instead of a global slideIndex, we’ll store each slideshow’s current index in a data-* attribute on its container. This way, each slideshow keeps track of its own state:

// Initialize all slideshows on page load
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.rb-slider').forEach(slider => {
    const slides = slider.querySelectorAll('.rbSlide');
    // Set initial index to 1 and show the first slide
    slider.dataset.slideIndex = 1;
    slides.forEach(slide => slide.style.display = 'none');
    slides[0].style.display = 'block';
  });
});

function plusDivs(btn, n) {
  // Find the parent slideshow container for the clicked button
  const slider = btn.closest('.rb-slider');
  const slides = slider.querySelectorAll('.rbSlide');
  
  // Get the current index from the container's data attribute
  let slideIndex = parseInt(slider.dataset.slideIndex);
  
  // Update the index with the button's direction (-1 or 1)
  slideIndex += n;
  
  // Wrap around if we go beyond the first/last slide
  if (slideIndex > slides.length) slideIndex = 1;
  if (slideIndex < 1) slideIndex = slides.length;
  
  // Save the updated index back to the container
  slider.dataset.slideIndex = slideIndex;
  
  // Hide all slides and show the current one
  slides.forEach(slide => slide.style.display = 'none');
  slides[slideIndex - 1].style.display = 'block';
}

How This Works #

• btn.closest('.rb-slider'): This finds the nearest parent element with the rb-slider class, so we only target the slideshow that the button belongs to.
• data-slide-index: Each slideshow stores its own current index in this attribute, so there’s no global state conflict.
• Per-slideshow initialization: We loop through all slideshows on page load to set up their initial state, instead of just running showDivs() once for all slides.

This approach is scalable too—you can add as many slideshows as you want, and each will work independently without any extra code changes.

内容的提问来源于stack exchange，提问作者Pascal