在ap元素上添加和删除类

Question

I am trying to add a class called active to the p children of a div using a click event. The first click adds the class to the p , but if I click on the second div the previous inserted class must be removed.

Here is a very basic example:

 $('.changeP').on('click',function(){ $(this).removeClass('active'); $(this).children('p').addClass('active'); }); 

 .active { color: orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-3 col-sm-3 col-xs-6"> <div class="changeP"> <img src="http://via.placeholder.com/350x150"> <p>Lorem ipsum loret</p> </div> <div class="col-md-3 col-sm-3 col-xs-6"> <div class="changeP"> <img src="http://via.placeholder.com/350x150"> <p>Lorem ipsum loret</p> </div> 

Answer 1

You ned to remove the class from all elements that have it, not just the clicked element. To do that change $(this) to $('.active') . Also note that your outer div elements are missing a closing tag. Try this:

 $('.changeP').on('click', function() { $('.active').removeClass('active'); $(this).children('p').addClass('active'); }); 

 .active { color: orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-3 col-sm-3 col-xs-6"> <div class="changeP"> <img src="http://via.placeholder.com/350x150"> <p>Lorem ipsum loret</p> </div> </div> <div class="col-md-3 col-sm-3 col-xs-6"> <div class="changeP"> <img src="http://via.placeholder.com/350x150"> <p>Lorem ipsum loret</p> </div> </div> 

Answer 2

here is your solution:

 $('.changeP').on('click',function(){
   $('p').removeClass('active');
   $(this).find('p').addClass('active');
 });

Answer 3

First, remove class active from all .changeP p elements (paragraphs inside changeP ), then add the class to the clicked one:

 $('.changeP').on('click', function() { $('.changeP p').removeClass('active'); // remove active class from all '.changeP p' $(this).children('p').addClass('active'); // add it to this p }); 

 .active { color: orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-3 col-sm-3 col-xs-6"> <div class="changeP"> <img src="http://via.placeholder.com/350x150"> <p>Lorem ipsum loret</p> </div> <div class="col-md-3 col-sm-3 col-xs-6"> <div class="changeP"> <img src="http://via.placeholder.com/350x150"> <p>Lorem ipsum loret</p> </div> </div> </div> 

Answer 4

I guess you are looking for jQuery toggleClass function which adds the class if not added previously and removes if already added.

$('.changeP').on('click', function() {
  $(this).children('p').toggleClass('active');
});

Answer 5

Try this code:

$('.changeP').click(function(){
    var $this = $(this),
        $p = $this.find('p'),
        $activeP = $('.changeP .active');
    if(!$p.hasClass('active')) {
        $activeP.removeClass('active');
        $p.addClass('active');
    }
});