Question

任何人都可以告诉我如何优化这个JS .. 试图做但面临太多问题..

$('.sub-about, #overabout').mouseenter(function(e) {
  $('#overabout').addClass('slide');
});
$('.sub-about, #overabout').mouseleave(function(e){
  $('#overabout').removeClass('slide');
});
$('.sub-education, #overeducation').mouseenter(function(e) {
  $('#overeducation').addClass('slide');
});
$('.sub-education, #overeducation').mouseleave(function(e){
  $('#overeducation').removeClass('slide');
});

Answer 1

如果您的意思是“＃34;优化＆＃34;然后看看这个：

$('.sub-about, #overabout').hover(function(e) {
    $(this)[e.type == 'mouseenter' ? 'addClass' : 'removeClass']('slide');
});
$('.sub-education, #overeducation').hover(function(e) {
    $(this)[e.type == 'mouseenter' ? 'addClass' : 'removeClass']('slide');
});

选择器也可以合并。所以更短的是：

$('#overabout, #overeducation, .sub-education, .sub-about').hover(function(e) {
    $(this)[e.type == 'mouseenter' ? 'addClass' : 'removeClass']('slide');
});

http://jsfiddle.net/aywgvoh7/

Answer 2

如果没有像其他人所说的那样看到HTML / CSS的其他部分，那么这里做的事情并不多。我做的一件事情往往是将jQuery选择存储在变量中（如果你的html不会改变），这样你就不会每次都在搜索它们。

$overeducation = $('#overeducation');
$overabout     = $('#overabout');

$('.sub-about, #overabout').mouseenter(function(e) {
    $overabout.addClass('slide');
});
$('.sub-about, #overabout').mouseleave(function(e){
    $overabout.removeClass('slide');
});
$('.sub-education, #overeducation').mouseenter(function(e) {
    $overeducation.addClass('slide');
});
$('.sub-education, #overeducation').mouseleave(function(e){
    $overeducation.removeClass('slide');
});

虽然这是一个小小的改进，但基本上你可以在这个例子中做所有事情。如果您有很多具有.sub-about和.sub-education分类的元素，您只会看到性能方面的真正改善。

如何优化此脚本...？

2 个答案: