このjsを単純化するには？

Question

私は解決策があまりにも愚かだが、私はそれを見つけることはできません知っている：/ 私はこのjsコードを簡素化するために探しています。

しかし、私はあなたが簡素化を学ぶためのリンクを持っているなら、特に理解しています。

私はJSはそうあまりにも多くの私を判断しないでください開始;）事前に

感謝を。

コードのJs：

$('#img1, #menu1').hover(
    function() { 
     $('#menu1').toggleClass("activeMenu"); 
     $('#img1').toggleClass("activeImg"); 
}); 

$('#img2, #menu2').hover(
    function() { 
     $('#menu2').toggleClass("activeMenu"); 
     $('#img2').toggleClass("activeImg"); 
}); 
$('#img3, #menu3').hover(
    function() { 
     $('#menu3').toggleClass("activeMenu"); 
     $('#img3').toggleClass("activeImg"); 
}); 
$('#img4, #menu4').hover(
    function() { 
     $('#menu4').toggleClass("activeMenu"); 
     $('#img4').toggleClass("activeImg"); 
}); 
$('#img5, #menu5').hover(
    function() { 
     $('#menu5').toggleClass("activeMenu"); 
     $('#img5').toggleClass("activeImg"); 
}); 

コードのHTML：

<ul>    
    <li id="menu1">Module Accueil</li> 
    <li id="menu2">Module Produit</li> 
    <li id="menu3">Module Diaporama</li> 
    <li id="menu4">Module Article</li> 
    <li id="menu5">Module Contact</li> 
</ul> 
<img id="img1" src="/themes/courant/images/image1"> 
<img id="img2" src="/themes/courant/images/image2"> 
<img id="img3" src="/themes/courant/images/image3"> 
<img id="img4" src="/themes/courant/images/image4"> 
<img id="img5" src="/themes/courant/images/image5"> 

Answer 1

あなたは以下のように一般的な機能を抽出することができ、重複コードを削減し、ロジックを行うための一般的な機能を持っています。

function onHoverCall(selector1,selector2,selector3){ 
 
    $(selector).hover(
 
     function() { 
 
      $(selector2).toggleClass("activeMenu");//you can change these as well 
 
      $(selector3).toggleClass("activeImg"); 
 
    }); 
 
} 
 
/*$('#img1, #menu1').hover(
 
    function() { 
 
     $('#menu1').toggleClass("activeMenu"); 
 
     $('#img1').toggleClass("activeImg"); 
 
});*/ 
 
onHoverCall('#img1, #menu1','#menu1','#img1');

<li id="menu1">Module Accueil</li> 
 
    <li id="menu2">Module Produit</li> 
 
    <li id="menu3">Module Diaporama</li> 
 
    <li id="menu4">Module Article</li> 
 
    <li id="menu5">Module Contact</li> 
 
</ul> 
 
<img id="img1" src="/themes/courant/images/image1"> 
 
<img id="img2" src="/themes/courant/images/image2"> 
 
<img id="img3" src="/themes/courant/images/image3"> 
 
<img id="img4" src="/themes/courant/images/image4"> 
 
<img id="img5" src="/themes/courant/images/image5">

Answer 2

単にあなたがこれを頼むために右のサイト上じゃない

$('ul li[id^=]').hover(function() { 
    $(this).toggleClass("activeMenu"); 
}); 
$('img[id^="img"]').hover(function() { 
    $(this).toggleClass("activeImg"); 
});