javascript - 在 p 元素上添加和删除类

Question

我正在尝试使用点击事件将名为 active 的类添加到 div 的 p 子级。第一次单击将类添加到 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 元素缺少结束标记。试试这个:

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