Comment simplifier cela js?

Question

Je sais que la solution est trop stupide mais je ne la trouve pas:/ Je cherche à simplifier ce code js.

mais je cherche surtout à comprendre si vous avez un lien pour apprendre la simplification.

je commence la JS alors ne me juge pas trop;)

Merci à l'avance.

code 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"); 
}); 

Code 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

Vous pouvez extraire une fonction commune comme ci-dessous pour réduire le code en double et ont une fonction commune à faire la logique.

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

Essayez simplement

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