简化我的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，而不是改变很多代码。