如何分別為多個元素運行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>