jQuery 单击时从父项中删除 class

Question

我有一个元素，一旦你点击它，它就会添加和删除 class 和 jQuery。当您单击子元素时，我希望 classes 再次交换。我尝试用 .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>

您可以进行许多其他改进来简化代码，但为了完整性，它们与问题无关

链接你的方法来避免重复自己
考虑如果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>

jQuery 单击时从父项中删除 class

jQuery remove class from parent on click

jquery

click

parent-child

addclass

removeclass