在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');
    }
});