我正在尝试使用点击事件将名为 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>
最佳答案
您需要从所有拥有该类的元素中删除该类,而不仅仅是被单击的元素。为此,将 $(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>
关于javascript - 在 p 元素上添加和删除类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46218669/