如何簡化這個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？

回答

相關問題