javascript - 如何使这个有效的 Java 脚本更有效率

Question

我有一个运行正常的 jQuery 脚本，这意味着它达到了目的。

问题是:如何让这个脚本更有效率？

目前，当用户将鼠标放在(悬停)某个带有 ID 的 HTML5 部分标签上时，脚本就会激活。此时脚本从包含子菜单列表的从属导航标签中删除名为“noDisplay”的现有类，因此内容对用户可见。这个子菜单列表可能有三到四个层次。子菜单保存在类中(subMenu1、subMenu2、subMenu3、subMenu4 等)。 该脚本被编写为单独服务于每个给定的部分 ID 及其子级类。

基本上，脚本通过在鼠标悬停时删除类“noDisplay”并在鼠标离开时恢复相同的类来与 DOM 交互。 (试图给出一个明确的解释。如果没有请询问。)

这是一个 JSfiddle:enter link description here

我希望有人可以建议一种更有效地执行此操作的方法。 可能有更多的部分(#ID's)和子菜单级别(每个级别一个类)。

使用 CSS 属性 'display: none;'和“display:block;” 将是最简单的解决方案，但这不需要，因为搜索机器人我决定跳过标记为对用户或屏幕阅读器不可见的内容。此处使用的“NoDisplay”类使内容对用户不可见，并保持其对屏幕阅读器(以及大多数搜索机器人)的可读性。

因此脚本功能基本上保持不变，即在悬停时删除和添加“noDisplay”类。 目标是获得一个更高效的脚本，它可以为每个部分使用实例变量，而不是为每个新部分编写代码，从而扩展当前脚本。

//section1$("#section1 .NavUL1 .subMenu1").hover(function(){
    $(".NavUL2").removeClass("noDisplay");            //display
    },function(){
    $(".NavUL2").addClass("noDisplay");            //no display
});
$("#section1").hover(function(){
    $("#section1 .NavUL1").removeClass("noDisplay");            //display
    },function(){
    $("#section1 .NavUL1").addClass("noDisplay");            //no display
});
$("#section1 .NavUL1 .subMenu1").hover(function(){
    $(".NavUL2").removeClass("noDisplay");            //display
    },function(){
    $(".NavUL2").addClass("noDisplay");            //no display
});
//#section2
$("#section2").hover(function(){
    $("#section2 .NavUL1").removeClass("noDisplay");            //display
    },function(){
    $("#section2 .NavUL1").addClass("noDisplay");            //no display
});
$("#section2 .subMenu1").hover(function(){
    $(".subMenu1 .NavUL2").removeClass("noDisplay");            //display
    },function(){
    $(".subMenu1 .NavUL2").addClass("noDisplay");            //no display
});
$("#section2 .subMenu2").hover(function(){
    $(".subMenu2 .NavUL2").removeClass("noDisplay");            //display
    },function(){
    $(".subMenu2 .NavUL2").addClass("noDisplay");            //no display
});
$("#section2 .subMenu3").hover(function(){
    $(".subMenu3 .NavUL2").removeClass("noDisplay");            //display
    },function(){
    $(".subMenu3 .NavUL2").addClass("noDisplay");            //no display
});
$("#section2 .subMenu4").hover(function(){
    $(".subMenu4 .NavUL2").removeClass("noDisplay");            //display
    },function(){
    $(".subMenu4 .NavUL2").addClass("noDisplay");            //no display
});

Answer 1

我的建议是创建一个新类，随便叫它什么，但出于演示目的，我们称它为 hover-class

那么就变得简单了:

$('.hover-class').hover(
    function() { $(this).addClass('noDisplay'); },
    function() { $(this).removeClass('noDisplay'); }
);