結合jquery的效率

試圖凝聚網站上的一些編碼我現在正在尋找並想知道是否有更有效的方式來編寫下面的代碼，因爲我意識到信息翻倍。結合jquery的效率

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

來源

2012-11-09 Vince Pettit

您可以使用hover和toggle方法：

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

hover是mouseenter的簡寫（不是鼠標懸停）和mouseleave事件，它也接受2種功能。您也可以緩存對象。

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

來源

2012-11-09 14:33:54 undefined

完美寫，謝謝 –

大多數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。

來源

2012-11-09 14:34:11

這可能是多一點瘦肉：

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

來源

2012-11-09 14:37:37 j08691

利用鏈和最終方法，您可以

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

來源

2012-11-09 14:39:44 Pavan

結合jquery的效率

回答

相關問題