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()来阻止这种情况发生：

＆＃13;

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

＆＃13;

.inactive{ background-color:red}

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

.inactive{ background-color:red}

＆＃13;

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

＆＃13;

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

1 个答案: