jQuery удалить класс из родительского по клику

У меня есть элемент, который, когда вы нажимаете на него, добавляет и удаляет класс с помощью 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();
});

click jquery parent-child addclass removeclass
person MaikThoma    schedule 05.03.2015    source источник
comment
Событие распространяется, когда вы нажимаете на дочерний элемент, вызывая обработчик кликов на родительском элементе (фактически отменяя то, что только что сделал обработчик кликов на дочернем элементе)   -  person billyonecan    schedule 05.03.2015
comment
Первая часть работает при нажатии на статью, но когда я нажимаю .close, классы не переключаются.   -  person MaikThoma    schedule 05.03.2015

Ответы (1)


arrow_upward
8
arrow_downward

Поскольку .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. считайте, что iftoggleClass более подходит, чем 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>

person Jamiec    schedule 05.03.2015