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（ not mouseover ）和mouseleave事件的简写，它还接受2个函数。您也可以缓存对象。

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

Answer 2

这可能更精益：

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

Answer 3

大多数jQuery方法返回对象，允许您链接事件：

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

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

只要你愿意，你就可以创建这样的链。

有关详细信息，请参阅this article。

Answer 4

利用链接和结束方法，您可以写为

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

结合jquery提高效率

4 个答案: