简化我的 JS 代码

Question

我刚刚为网站的菜单编写了这段代码。问题是我很确定它可以简化。

我不知道我是否可以使用开关或其他东西，我只是 Jquery 的初学者......

$(document).ready(function() {

/* Effet hover sur onglet Accueil */
$("#menu-top li a.accueil").mouseover(function() {

    if (($("#menu-top li a.accueil").is(".active")) || ($("#menu-top li a.services").is(".active")) || ($("#menu-top li a.realisations").is(".active"))) {
            return false;
    } else {
            $(this).removeClass("rightactive");
            $(this).addClass("righthover");
    }

    $("#menu-top li a.accueil")}).mouseout(function(){

    if (($("#menu-top li a.accueil").is(".active")) || ($("#menu-top li a.services").is(".active")) || ($("#menu-top li a.realisations").is(".active"))) {
            return false;
    } else {
        $(this).removeClass("righthover");
        $(this).addClass("rightactive");
    }

    }); 

/* Effet hover sur onglet Entreprise */
$("#menu-top li a.entreprise").mouseover(function() {

    if (($("#menu-top li a.entreprise").is(".active")) || ($("#menu-top li a.realisations").is(".active")))  {
            return false;

    } else if ($("#menu-top li a.services").is(".active")) {
        $(this).removeClass("rightactive");
        $(this).addClass("righthover");

    } else {
            $(this).removeClass("leftactive");
            $(this).addClass("lefthover");
    }

    $("#menu-top li a.entreprise")}).mouseout(function(){

    if (($("#menu-top li a.entreprise").is(".active")) || ($("#menu-top li a.realisations").is(".active"))) {
            return false;

    } else if ($("#menu-top li a.services").is(".active")) {
        $(this).removeClass("righthover");
        $(this).addClass("rightactive");

    } else {
            $(this).removeClass("lefthover");
            $(this).addClass("leftactive");
    }

    });

/* Effet hover sur onglet Services */
$("#menu-top li a.services").mouseover(function() {

    if (($("#menu-top li a.services").is(".active")) || ($("#menu-top li a.accueil").is(".active"))) {
            return false;

    } else if ($("#menu-top li a.realisations").is(".active")) {
        $(this).addClass("righthover");
        $(this).removeClass("rightactive");

    } else {
            $(this).removeClass("leftactive");
            $(this).addClass("lefthover");
    }

    $("#menu-top li a.services")}).mouseout(function(){

    if (($("#menu-top li a.services").is(".active")) || ($("#menu-top li a.accueil").is(".active"))) {
            return false;

    } else if ($("#menu-top li a.realisations").is(".active")) {
        $(this).removeClass("righthover");
        $(this).addClass("rightactive");

    } else {
        $(this).removeClass("lefthover");
        $(this).addClass("leftactive");
    }


    });

/* Effet hover sur onglet Réalisations */
$("#menu-top li a.realisations").mouseover(function() {

    if (($("#menu-top li a.realisations").is(".active")) || ($("#menu-top li a.accueil").is(".active")) || ($("#menu-top li a.entreprise").is(".active"))) {
            return false;
    } else {
            $(this).removeClass("leftactive");
            $(this).addClass("lefthover");
    }

    $("#menu-top li a.realisations")}).mouseout(function(){

    if (($("#menu-top li a.realisations").is(".active")) || ($("#menu-top li a.accueil").is(".active")) || ($("#menu-top li a.entreprise").is(".active"))) {
            return false;
    } else {
        $(this).removeClass("lefthover");
        $(this).addClass("leftactive");
    }


    });
    });

这是我的 html

<nav id="menu-top">
     <ul>
        <li><a href="index.php" class="accueil active">Accueil</a></li>
        <li><a href="entreprise.php" class="entreprise leftactive">Entreprise</a></li>
        <li><a href="services.php" class="services">Services</a></li>
        <li><a href="realisations.php" class="realisations">Réalisations</a></li>
     </ul>
    </nav>

对此的任何帮助将不胜感激。

谢谢。

Answer 1

我建议您可以将标签更改为类似以下内容：

<a href="index.php" data-link="accueil" class="active">Accueil</a>

在 javascript 中，您可以有一个名为 rels 的哈希表来放置链接之间的所有复杂依赖关系

;(function(){
    var rels = {
        'entreprise': ['entreprise', 'realisations'],
        'services': ['services', 'realisations'],
        ...
    }

    function checkRels(link){
        var other = rels[link];
        for(var i = 0; i < other.length; i++){
            if($('#menu-top li a[data-link="' + other[i] + '"]').is('.active')){
                return false;
            }
        }
        return true;
    }

    $("#menu-top li a").mouseover(function() {
        var link = $(this).attr('data-link');
        if(!checkRels(link))return false;
        $(this).removeClass("rightactive");
        $(this).addClass("righthover");
    }).mouseout(function(){
        var link = $(this).attr('data-link');
        if(!checkRels(link))return false;
        $(this).removeClass("righthover");
        $(this).addClass("rightactive");
    }); 
}())

当您想要更改依赖关系或添加更多依赖关系时，您可以简单地调整 rels ，而不是改很多代码。