如何简化这个js？

我知道解决方案过于愚蠢，但我没有找到它：/ 我正在寻求简化这个JS代码。如何简化这个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">

来源

2017-10-10 Krash

您正确的网站上是不是问这个。去代码审查部分 – Alexis

https://codereview.stackexchange.com/ – DontVoteMeDown

从一目了然，我认为你可以转换所有的JS到CSS'：hover' .. – vsync

您可以提取如下常见的功能，以减少重复代码，有一个共同的功能做的逻辑。

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">

来源

2017-10-10 14:03:30

非常感谢:)但我有这个：有可能简化呢？ onHoverCall（'＃img1，＃menu1'，'＃menu1'，'＃img1'）; onHoverCall（'＃img2，＃menu2'，'＃menu2'，'＃img2'）; onHoverCall（'＃img3，＃menu3'，'＃menu3'，'＃img3'）; onHoverCall（'＃img4，＃menu4'，'＃menu4'，'＃img4'）; onHoverCall（'＃img5，＃menu5'，'＃menu5'，'＃img5'）; – Krash

你可以将这些ID放在一个变量中，并在任何地方使用它们 –

只是一味

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

来源

2017-10-10 14:04:16 gurvinder372

感谢您的回答 – Krash

如何简化这个js？

回答

相关问题