jQuery删除类并在单击元素上添加类

Question

I have a div with 6 p's in it. And I start with the first p having the class "active" now when you press an other p I want that active class to be removed and added on the clicked p

This is what I have the class is being added on the clicked p but not being removed from the other p's.

This is my html:

<div class="slider-circles">
   <p id="slide1" class="transparent-circle active"></p>
   <p id="slide2" class="transparent-circle"></p>
   <p id="slide3" class="transparent-circle"></p>
   <p id="slide4" class="transparent-circle"></p>
   <p id="slide5" class="transparent-circle"></p>
   <p id="slide6" class="transparent-circle"></p>

This is my jquery

$(".slider-circles p").click(function(e){
            e.preventDefault();
            if($(this).hasClass("active")){
                $(this).parent().siblings().removeClass("active");
            }
            $(this).addClass("active"); 
});

Answer 1

Try to grab the closest .slider-circles and find children elements with class .active and remove that class. After that just add class active to the current element.

$(".slider-circles p").click(function(e){
 e.preventDefault();
 $(".active", $(this).closest(".slider-circles")).removeClass("active");
 $(this).addClass("active"); 
});

DEMO

Answer 2

Since the p are siblings already you should not call the .parent() .

$(".slider-circles p").click(function(e){
     e.preventDefault();
      $(this).addClass('active').siblings().removeClass('active');
});

Answer 3

You just need a one liner:

$(".slider-circles p").click(function(e){
    e.preventDefault();
    $(this).addClass("active").siblings().removeClass("active"); 
});

Answer 4

The logic will be like this -

1. On click on p tag
2. You will remove active class from all p tags
3. You will add class to that p tag

So, in this way, you will always have clean and short code.

 $(document).ready(function() { $('.slider-circles p').click(function() { $('.slider-circles p').removeClass('active'); $(this).addClass('active'); }); }); 

 .active { background: steelblue; color: #fff; padding: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slider-circles"> <p id="slide1" class="transparent-circle active">1 Para</p> <p id="slide2" class="transparent-circle">2 Para</p> <p id="slide3" class="transparent-circle">3 Para</p> <p id="slide4" class="transparent-circle">4 Para</p> <p id="slide5" class="transparent-circle">5 Para</p> <p id="slide6" class="transparent-circle">6 Para</p> </div>