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

私はあなたのようなものにタグを変えることができることを示唆している：

JavaScriptで

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

、あなたはハッシュテーブルがあなたのリンク

;(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を求めていることができます

依存関係を変更したい場合や追加する場合は、多くのコードを変更するのではなく、relを調整するだけです。