2

Почему по клику на блок .close не убирается класс у родителя?

$('.modal').click(function() {
  $(this).addClass('hi');
});

$('.close').click(function() {
  $('.modal').removeClass('hi');
});
.hi {
  color: green;
}
<div class="modal">
  <div class="content">123</div>
  <div class="close">close</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

3
  • $(document).on("click", '.close', function() { /*code*/ });
    – soledar10
    Commented 29 дек. 2017 в 10:44
  • @Regent jsfiddle.net/koba140g
    – soledar10
    Commented 29 дек. 2017 в 11:08
  • @soledar10 а, да, не продумал вариант до конца. Хоть и достаточно костыльно, но таки работает.
    – Regent
    Commented 29 дек. 2017 в 11:37

4 ответа 4

5

Клик по .close приводит к вызову обработчика как для .close, так и для .model. Соответственно, класс удаляется и следом снова добавляется.
Как вариант, можно запрещать "всплывание" события:

$('.modal').click(function() {
  $(this).addClass('hi');
});

$('.close').click(function() {
  $('.modal').removeClass('hi');
  return false;
});
.hi {
  color: green;
}
<div class="modal">
  <div class="content">123</div>
  <div class="close">close</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1

$('.modal').click(function(event) { 
    $(event.target).hasClass('close') ? $(this).removeClass('hi') : $(this).addClass('hi');
});
.hi {
  color: green;
}
<div class="modal">
  <div class="content">123</div>
  <div class="close">close</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2
  • 1
    Скобки вокруг $(event.target).hasClass('close') лишние, а в целом вариант мне нравится: как-никак, всего один обработчик click вместо двух.
    – Regent
    Commented 29 дек. 2017 в 12:13
  • @Regent а спасибо, учёл)
    – Kirill
    Commented 29 дек. 2017 в 12:15
1

Класс у родителя удаляется, и после этого клик всплывает к нему, где класс добавляется заново. По клику на .close нужно отключать дальнейшее всплытие события.

$('.modal').click(function() {
  $(this).addClass('hi');
});

$('.close').click(function(e) {
  e.stopPropagation();
  $('.modal').removeClass('hi');
});
.hi {
  color: green;
}
<div class="modal">
  <div class="content">123</div>
  <div class="close">close</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

0

Вот так, например, все работает:

$('.modal').click(function() {
  $(this).addClass('hi');
});

$('.close').click(function() {
  $('.modal').removeClass('hi');
});
.hi {
  color: green;
}
.modal {
  width:100px;
  height:100px;
  background:red;
}
.close {
  width:40px;
  height:30px;
  background:blue;
  text-align:center;
  padding: 10px 0 0;
  position:relative;
  top:-100px;
  left:60px
}
<div class="modal">
  <div class="content">123</div>
</div>
<div class="close">X</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

3
  • потому что, открывается и закрывается по клику на разные кнопки Commented 29 дек. 2017 в 10:53
  • То есть структура html принципиальна? Вынос класса "close" за пределы класса "modal" решает проблему. Если нужно чтобы они отображались как родительский и дочерний - можно через css натянуть например крестик на угол "модального окна"
    – SoVerk
    Commented 29 дек. 2017 в 11:05
  • @SoVerk а зачем менять HTML и заморачиваться за CSS, если проблема решается минимальными изменениями в JS?
    – Regent
    Commented 29 дек. 2017 в 11:34

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.