在ap元素上添加和删除类

Question

我正在尝试使用click事件向div的p子项添加一个名为active的类。 第一次单击将类添加到p ，但如果我单击第二个div，则必须删除先前插入的类。

这是一个非常基本的例子：

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

您需要从包含它的所有元素中删除该类，而不仅仅是单击的元素。 要做到这一点，请将$(this)更改$(this) $('.active') 。 另请注意，您的外部div元素缺少结束标记。 尝试这个：

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

这是你的解决方案：

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

Answer 3

首先，从所有.changeP p元素（ changeP段落）中删除class active ，然后将该类添加到单击的一个：

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

我猜您正在寻找jQuery toggleClass函数，如果之前没有添加该类，则添加该类，如果已添加则删除。

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

Answer 5

试试这段代码：

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