如何优化此脚本...？答案

【问题标题】：how to optimize this script...?如何优化此脚本...？
【发布时间】：2015-07-24 21:01:39
【问题描述】：

谁能告诉我如何优化这个 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');
});

【问题讨论】：

似乎优化得很好，但有更多可读的方式来编写它。
请也提供您的 html - 是否有多个 sub-about 元素？他们都应该针对过度元素吗？与过度还原相同
我只是试图在悬停隐藏 n 显示 div 上，这正在工作。我只需要优化..
请阅读此stackoverflow.com/help/mcve，如果您不能提供最小的 html，我们无法真正查看是否可以优化脚本，因为我们不知道它是否影响了正确的元素。例如，您可以为所有元素添加一个类，并使用数据属性将这些功能组合在一起。这个问题在codereview.stackexchange.com 上可能会更好

标签： javascript optimization

【解决方案1】：

没有看到其他人所说的 HTML/CSS 的其余部分，这里没什么可做的。不过，我倾向于做的一件事是将 jQuery 选择存储在变量中（如果您的 html 不会更改），这样您就不会每次都在 DOM 中搜索它们。

$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】：

如果你的意思是“优化”的代码更少，那么看看这个：

$('.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/

【讨论】：