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

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

...
$(".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");});
...

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

最佳答案

假设您声明两个HTML结构位于DOM的不同部分中，那么进行DRY处理的一种方法是在所有.window-X元素上放置一个通用类，并使用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中执行此操作，但这完全取决于模式与悬停元素的关系。