Question

我知道解决方案过于愚蠢，但我找不到：/ 我正在寻求简化这个js代码。

但我特别希望理解，如果你有一个学习简化的链接。

我启动JS所以不要过多地评判我;）

提前致谢。

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

代码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

只需尝试

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

Answer 2

您可以提取如下常用函数来减少重复代码，并具有执行逻辑的通用功能。

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

如何简化这个js？

2 个答案: