jQuery在单击时从父项中删除类

Question

我有一个元素,一旦你点击它,它添加和删除一个类与jQuery.当您单击子元素时,我希望类再次交换.我试过这样做,.parent但似乎没有用..

这是html:

<article class="block inactive">
  <span class="close"></span>
</article>

和jQuery:

$('.block').click(function(){
    $(this).removeClass('inactive'),
    $(this).addClass('active');
});

$('.close').click(function(){
    $(this).parent().addClass('inactive');
    $(this).parent().removeClass('active');
});

编辑

解:

$('.block').click(function(){
    $(this).addClass('active');
    $(this).removeClass('inactive');
});

$('.close').click(function(e){
    $(this).parent('.block').toggleClass('inactive active');
    e.stopPropagation();
});

Answer 1

因为事件.close的子.block节点正在传播并且还触发了处理程序.block,这意味着类正在立即恢复.你可以.stopPropagation()用来阻止这种情况发生:

$('.block').click(function(){
    $(this).removeClass('inactive'),
    $(this).addClass('active');
});

$('.close').click(function(e){
    $(this).parent().addClass('inactive');
    $(this).parent().removeClass('active');
    e.stopPropagation();
});

.inactive{ background-color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="block inactive">
    in the block
  <span class="close">in the close</span>
</article>

您可以使用许多其他增强功能来简化代码,但为了完整性,它们与问题相关

1. 链接你的方法来保存重复自己
2. 考虑是否toggleClass比addClass/ 更合适removeClass.

$('.block').click(function(){
    $(this).removeClass('inactive').addClass('active');
});

$('.close').click(function(e){
    $(this).parent().addClass('inactive').removeClass('active');
    e.stopPropagation();
});

.inactive{ background-color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="block inactive">
    in the block
  <span class="close">in the close</span>
</article>