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（マウスオーバーではなく）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 に答える