Question

我正在尝试使用点击事件向active p个孩子添加一个名为div的班级。第一次单击会将类添加到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)更改为$('.active')。另请注意，您的外div元素缺少结束标记。试试这个：

＆＃13;

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

＆＃13;

.active { color: orange; }

＆＃13;

<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>

＆＃13;

Answer 2

这是你的解决方案：

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

Answer 3

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

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

在p元素上添加和删除类

5 个答案: