jquery - 结合jquery提高效率

Question

尝试压缩我现在正在维护的网站上的一些编码，并想知道是否有更有效的方法来编写以下编码，因为我意识到信息加倍。

$("span.menu-link-title.active-components").mouseover(function(){$('#active-components-image').css('display', 'block');});
$("span.menu-link-title.active-components").mouseleave(function(){$('#active-components-image').css('display', 'none');});
$("span.menu-link-title.adaptors").mouseover(function(){$('#adaptors-image').css('display', 'block');});
$("span.menu-link-title.adaptors").mouseleave(function(){$('#adaptors-image').css('display', 'none');});

Answer 1

您可以使用hover和toggle方法:

$("span.menu-link-title.adaptors").hover(function(){
   $('#adaptors-image').toggle();
});

hover 是 mouseenter(不是 mouseover)和 mouseleave 事件的简写，它还接受 2 个函数。您还可以缓存对象。

var $adapt = $('#adaptors-image');
$("span.menu-link-title.adaptors").hover(function(){
    $adap.show(); // mouseenter
}, function(){
    $adap.hide(); // mouseleave
});