javascript - 如何优化 jquery 中的典型功能(mouseover/mouseout)？

Question

我编写代码以在悬停其他部分时打开页面的某些部分。

...
$(".window-one").mouseover(function() {$(".window-one-modal").removeClass("def-visible");});
$(".window-one").mouseout(function() {$(".window-one-modal").addClass("def-visible");});

$(".window-two").mouseover(function() {$(".window-two-modal").removeClass("def-visible");});
$(".window-two").mouseout(function() {$(".window-two-modal").addClass("def-visible");});

$(".window-three").mouseover(function() {$(".window-three-modal").removeClass("def-visible");});
$(".window-three").mouseout(function() {$(".window-three-modal").addClass("def-visible");});
...

但是我有很多元素需要悬停和显示，所以我得到了很多典型的代码。我该如何优化它？

Answer 1

鉴于您声明这两个 HTML 结构在 DOM 的不同部分中，一种干燥的方法是在所有 .window-X 元素上放置一个公共(public)类并使用 data 属性来指定它们的目标模态。从那里您可以使用单个 hover() 调用和 toggleClass() 方法。试试这个:

var $modals = $('.modal');

$(".window").hover(function() {
  $modals.filter($(this).data('target')).toggleClass("def-visible");
});

.def-visible {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="window" data-target="#modal-one">Hover Me</div>
<div class="window" data-target="#modal-two">Hover Me</div>
<div class="window" data-target="#modal-three">Hover Me</div>
<br /><br /><br />
<div class="modal def-visible" id="modal-one">Modal one</div>
<div class="modal def-visible" id="modal-two">Modal two</div>
<div class="modal def-visible" id="modal-three">Modal three</div>

这里需要注意的是，toggle() 使用了 mouseenter 和 mouseleave 事件。前者优于 mouseover，因为它仅在鼠标进入元素位置时触发一次，这在这种情况下提供了更好的性能。

也可以单独在 CSS 中执行此操作，但这完全取决于模式如何与悬停元素相关。