Смена класса при нажатии иногда застревает - PullRequest
Новая
       18

Смена класса при нажатии иногда застревает

0 голосов
/ 31 января 2020

У меня есть этот код, и он работает, что нужно сделать, но иногда он зависает (при нажатии иногда не меняет класс). Почему? JSFiddle 

$('#button').hover(function(e) {
  $('.box').css('animation', 'fade-in .3s forwards');
  $(this).css('background-color', 'blue');
  $(this).click(function() {
    if ($(this).hasClass('on')) {
      $(this).removeClass('on');
    } else {
        $('#button').removeClass();
      $(this).addClass('on');
    }
  });
}, function() {
  if ($(this).hasClass('on')) {
    return;
  } else {
    $('.box').css('animation', 'fade-out .3s forwards');
    $(this).css('background-color', 'red');
  };
})

1 Ответ

0 голосов
/ 31 января 2020

Проблема в том, что вы вкладываете обработчики событий; click в пределах mouseenter в этом случае. Таким образом, вы создаете новый обработчик кликов каждый раз, когда что-то происходит с кнопкой.

Из контекста кода кажется, что вы хотите, чтобы «модал» скрывал / отображал при наведении на кнопку, но также оставался видимым при нажатии кнопки. Таким образом, вы можете добавить класс к модалу, который вы можете проверить, а затем не скрывать этот элемент при возникновении соответствующего события.

Также обратите внимание, что вы можете улучшить логику c с помощью CSS классов вместо встраивания правил CSS в JS logi c. Попробуйте это: 

let $modal = $('.modal');

$('#button').hover(function(e) {
  $modal.addClass('show');
}, function() {
  $modal.not('.on').removeClass('show');
}).on('click', function() {
  $(this).add($modal).toggleClass('on');
});
body {
  margin: 0 auto;
}

#button {
  background-color: red;
  width: 200px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
}

#button.on {
  background-color: #0C0;
}

.modal {
  width: 500px;
  opacity: 0;
  height: 200px;
  margin: 0 auto;
  border: 1px solid grey;
  opacity: 0;
  transition: opacity .3s;
}

.modal.show {
  opacity: 1;
}

.modal h1,
p {
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p id="button">BUTTON</p>
</div>
<div class="modal">
  <h1>Title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Обратите внимание, что мне пришлось переставить S CSS в обычный старый CSS, чтобы фрагмент работал.

...