如何分别为多个元素运行jQuery函数？

Question

我无法让jQuery函数在单个元素上运行。 我的功能是滑块。 当我将一个滑块放到html ，它工作正常，没有问题。 但是，每当我尝试放置第二个滑块时，它都无法正常工作。 第一个滑块控制这两个控件，然后第二个滑块负责充电，如果我单击向右箭头的次数过多等。

这是我的jQuery代码：

$('.right-arrow').click(function () {
    var currentSlide = $('.slide.active');
    var nextSlide = currentSlide.next();

    currentSlide.fadeOut(300).removeClass('active');
    nextSlide.fadeIn(300).addClass('active');

    if (nextSlide.length == 0) {
        $('.slide').first().fadeIn(300).addClass('active');
    }
});

$('.left-arrow').click(function() {
    var currentSlide = $('.slide.active');
    var prevSlide = currentSlide.prev();

    currentSlide.fadeOut(300).removeClass('active');
    prevSlide.fadeIn(300).addClass('active');

    if (prevSlide.length == 0) {
        $('.slide').last().fadeIn(300).addClass('active');
    }
});

这是我使用它的地方：

<style>
.slide {
    display:none;
}
.slide.active {
    display:block;
}
</style>

<div class="slider-container">
  <div id="slider1">
    <div class="slide active">#1</div>
    <div class="slide">#2</div>
    <div class="slide">#3</div>
  </div>
  <p class="left-arrow"><</p>
  <p class="right-arrow">></p>
</div>

<div class="slider-container">
  <div id="slider2">
    <div class="slide active">#a</div>
    <div class="slide">#b</div>
    <div class="slide">#c</div>
  </div>
  <p class="left-arrow"><</p>
  <p class="right-arrow">></p>
</div>

就像我之前说的，当我单击第一个滑块的向右箭头时，将显示第一个滑块的#2和第二个滑块的#b 。

Answer 1

您由于行而得到这种行为

var currentSlide = $('.slide.active');

它会选择带有slide和active类的所有元素。 尝试用以下内容替换该行：

var currentSlide = $(this).parent().find('.slide.active');

这是在选择在$（this）上触发事件的元素。 然后获取该元素的父元素，然后在该元素中找到活动幻灯片。

编辑这是您的第一个if语句的示例。 再一次，您将获取导致事件的元素的父元素，然后在dom元素内搜索所有带有“ slide”类的元素。

附带说明一下，您可能希望使$（this）为变量，例如var $ this = $（this）。 然后使用$ this代替$（this）。 这是您可能会或可能不会在意的性能问题。

if (nextSlide.length == 0) {
    $(this).parent().find('.slide').first().fadeIn(300).addClass('active');

}

Answer 2

正如提到的其他答案和评论一样，您正在搜索整个文档中的.slide元素。 相反，您需要将搜索限制在相关的.slider-container元素内。 为此，可以使用JQuery.closest（） 。 同样，最好在显示新的.slide元素之前等待fadeOut动画完成使用完整的回调函数的.slide 。 您可以拿下一个示例作为实现的参考：

 $('.right-arrow').click(function() { var container = $(this).closest(".slider-container"); var currSlide = container.find('.slide.active'); var nextSlide = currSlide.next(".slide"); if (nextSlide.length === 0) nextSlide = container.find('.slide:first-child'); currSlide.fadeOut(300, function() { $(this).removeClass('active'); nextSlide.fadeIn(300).addClass('active'); }); }); $('.left-arrow').click(function() { var container = $(this).closest(".slider-container"); var currSlide = container.find('.slide.active'); var prevSlide = currSlide.prev(".slide"); if (prevSlide.length === 0) prevSlide = container.find('.slide:last-child'); currSlide.fadeOut(300, function() { $(this).removeClass('active'); prevSlide.fadeIn(300).addClass('active'); }); }); 

 .slide { display:none; } .slide.active { display:block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="slider-container"> <div id="slider1"> <div class="slide active">#1</div> <div class="slide">#2</div> <div class="slide">#3</div> </div> <p class="left-arrow">&lt;</p> <p class="right-arrow">&gt;</p> </div> <div class="slider-container"> <div id="slider2"> <div class="slide active">#a</div> <div class="slide">#b</div> <div class="slide">#c</div> </div> <p class="left-arrow">&lt;</p> <p class="right-arrow">&gt;</p> </div>