How to run jQuery function for multiple elements individually?

Question

I can't make my jQuery function work on individual elements. My function is a slider. When I put one slider to my html, it works fine, without problems. But whenever I try to put a second slider, it doesn't work properly. The first slider controls both of them, then the second slider takes the charge if I click right arrow too much etc.

Here is my jQuery code:

$('.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');
    }
});

And this is where I use it:

<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>

Like I said previously, when I click the first slider's right arrow, first slider's #2 and second slider's #b shows up.

Answered almost a duplicate situation here earlier today stackoverflow.com/a/56969093/1175966 — charlietfl
– charlietfl, Commented Jul 10, 2019 at 18:43
Your currentSlide selector searches on the whole document, you'll have to limit it to the slider-container of the clicked arrow. — msg
– msg, Commented Jul 10, 2019 at 18:46

phishfordead · Accepted Answer · 2019-07-10 18:58:56Z

1

You are getting this behavior because of the line

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

which selects all elements with the classes slide and active. try replacing that line with something like this:

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

What this is doing is selecting the element the event was fired on $(this). Then getting the parent of that element, then finding the active slide within that element.

EDIT Here is an example of your first if statement. Once again, you are getting the parent of the element that caused the event, then searching inside that dom element for all of the elements with a class of 'slide'.

As a side note you might want to make $(this) a variable something like var $this = $(this). Then use $this instead of $(this). It's a performance issue that you may or may not be concerned with.

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

}

edited Jul 10, 2019 at 18:58

answered Jul 10, 2019 at 18:46

phishfordead

3872 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

SaschaM78 Over a year ago

Just an OT notice: right now it reads "Write APS.Net" on your bio, I think it would be "ASP.Net", right? :-). And good answer.

phishfordead Over a year ago

@Sascham78 AH, stinking typos, I'll be fixing that immediately!

Onur Demirci Over a year ago

It solved my problem.Almost. Can you show me how can I implement this solution on my if statements?

Onur Demirci Over a year ago

@phishfordead that solved all of my problems. Thanks!

phishfordead Over a year ago

@OnurDemirci glad i could be of service. You'll be receiving an invoice in the mail :-) Have a good one!

Shidersz · Accepted Answer · 2019-07-10 19:50:35Z

As other answers and comments mentioned, you are searching the .slide elements on the whole document. Instead you need to limit the search inside the related .slider-container element. For this purpose, you can use JQuery.closest(). Also, it will be nice to wait the fadeOut animation to finish using the complete callback function before showing the new .slide element. You can take next example as reference of implementation:

$('.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>

Collectives™ on Stack Overflow

How to run jQuery function for multiple elements individually?

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related