点击更改课程有时会卡住答案

【问题标题】：Changing class on click sometimes stuck点击更改课程有时会卡住
【发布时间】：2020-01-31 15:33:28
【问题描述】：

我有这段代码，它可以正常工作，但有时会卡住（点击时有时不会更改类）。为什么？ 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');
  };
})

【问题讨论】：

您正在为每个 mouseenter 事件添加一个新的 click 处理程序（= .hover() 的第一个函数）。这不可能……;)
旁注；这是很多非干的$(this) 电话。

标签： jquery hover click

【解决方案1】：

问题是因为您正在嵌套事件处理程序；在这种情况下，mouseenter 中的 click。因此，每次按钮发生问题时，您都会创建另一个单击处理程序。

从代码的上下文来看，您似乎希望“模态”在按钮悬停时隐藏/显示，但在单击按钮时也保持可见。因此，您可以向模态框添加一个类，您可以检查该类，然后在相关事件触发时不隐藏该元素。

另外请注意，您可以通过使用 CSS 类而不是在 JS 逻辑中嵌入 CSS 规则来改进逻辑。试试这个：

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>

请注意，我必须将 SCSS 转换为普通的旧 CSS 才能使 sn-p 起作用。

【讨论】：