Почему не работает js скрипт?

229

06 августа 2021, 15:50

<img src="img/close.svg" alt="Web" class="modal__close"> 
<a href="javascript: void 0" class="button">Записаться на прием</a> 
<div class="modal"></div>

Имеется скрипт:

$('.button, .modal__close').click(function() { 
  if ($('.modal').hasClass('.modal__active')) { 
    $('.modal').removeClass('modal__active'); 
    $('body').css('overflow', 'unset'); 
  } else { 
    $('.modal').addClass('modal__active'); 
    $('body').css('overflow', 'hidden'); 
  } 
});

Почему то событие срабатывает при клике на .button, но не срабатывает при клике на .modal__close, это картинка (Я пробовал использовать другие классы но они так же не работают) В чем может быть причина?

Answer 1

У вас всё срабатывает. Вы ошиблись в (убрать .):

$('.modal').hasClass('.modal__active')

$('.button, .modal__close').click(function() { 
    console.log('click'); 
  if ($('.modal').hasClass('modal__active')) { 
    $('.modal').removeClass('modal__active'); 
    $('body').css('overflow', 'unset'); 
  } else { 
    $('.modal').addClass('modal__active'); 
    $('body').css('overflow', 'hidden'); 
  } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<img src="img/close.svg" alt="Web" class="modal__close"> 
<a href="javascript: void 0" class="button">Записаться на прием</a> 
<div class="modal"></div>

P.S. Учитесь дебажить код.