Question 10779 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

JQuery function affecting ALL elements of page

I made a script to toggle (on click) a class between elements of a group (slide-container) that works well.
Since I have multiple containers with the same class, all elements are affected.
I need to target only the clicked elements belonging to this slide-container. Not other slide-container

Here’s my code:

$(document).ready(function() {
  function activeSlide() {
    $("a.slide.active").not(this).removeClass("active");
    $(this).toggleClass("active");
  }

  $("a.slide").on("click", activeSlide);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h1>Test custom slider</h1>
  <div class="slide-container">
    <a href="#" class="slide active">
      <img src="patio-estrie-1.jpeg" alt="">
    </a>
    <a href="#" class="slide">
      <img src="patio-estrie-2.jpeg" alt="">
    </a>
    <a href="#" class="slide">
      <img src="patio-estrie-1.jpeg" alt="">
    </a>
    <a href="#" class="slide">
      <img src="patio-estrie-2.jpeg" alt="">
    </a>
  </div>
  <div class="slide-container">
    <a href="#" class="slide active">
      <img src="patio-estrie-1.jpeg" alt="">
    </a>
    <a href="#" class="slide">
      <img src="patio-estrie-2.jpeg" alt="">
    </a>
    <a href="#" class="slide">
      <img src="patio-estrie-1.jpeg" alt="">
    </a>
    <a href="#" class="slide">
      <img src="patio-estrie-2.jpeg" alt="">
    </a>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Instead of

    $("a.slide.active").not(this).removeClass("active");

    you can find the .slide elements in the current container:

    $(this).closest(".slide-container").find("a.slide").removeClass("active");

    That will only affect the relevant container. Then, instead of .toggleClass(), you can use .addClass() because you know that the current clicked element is the one to be active:

    $(this).addClass("active");

    If the intention is to allow an "active" element to be deactivated, so that all of them can be deactivated, then your own logic can be adapted to that. The key is the .closest() to find the container.

    Login or Signup to reply.
  2. 0 
      $("a.slide").click(function(){
    let id = $(this).parent().attr('id');
    $("#"+id+" a.slide.active").removeClass('active');
    $(this).addClass('active');
  });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="container">
      <h1>Test custom slider</h1>
      <div class="slide-container" id="slide1">
        <a href="#" class="slide active">
          <img src="patio-estrie-1.jpeg" alt="">
        </a>
        <a href="#" class="slide">
          <img src="patio-estrie-2.jpeg" alt="">
        </a>
        <a href="#" class="slide">
          <img src="patio-estrie-1.jpeg" alt="">
        </a>
        <a href="#" class="slide">
          <img src="patio-estrie-2.jpeg" alt="">
        </a>
      </div>
      <div class="slide-container" id="slide2">
        <a href="#" class="slide active">
          <img src="patio-estrie-1.jpeg" alt="">
        </a>
        <a href="#" class="slide">
          <img src="patio-estrie-2.jpeg" alt="">
        </a>
        <a href="#" class="slide">
          <img src="patio-estrie-1.jpeg" alt="">
        </a>
        <a href="#" class="slide">
          <img src="patio-estrie-2.jpeg" alt="">
        </a>
      </div>
    </div>

    You should put the id in the "Slider" divs. This way you can separate the two. and you can run it with the javascript code I added.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search