3

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

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

4 回答 4

4

您可以使用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
});
于 2012-11-09T14:33:54.223 回答
2

这可能更精简一点：

$("span.menu-link-title.active-components").hover(function() {
    $('#active-components-image').toggle();
});
$("span.menu-link-title.adaptors").hover(function() {
    $('#adaptors-image').toggle();
});​
于 2012-11-09T14:37:37.040 回答
0

大多数 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');
});

您可以根据需要创建这样的链。

有关更多信息，请参阅本文。

于 2012-11-09T14:34:11.963 回答
0

利用链接和结束方法，你可以写成

$("span.menu-link-title").find(".adaptors").hover(function(){
   $('#adaptors-image').toggle();
}).end().find(".active-components").hover(function(){
   $('#active-components-image').toggle();  
});
于 2012-11-09T14:39:44.960 回答