有人可以帮我简化这个 JQuery 代码吗？

Question

我是 jquery 的初学者，具有非常基础的 JavaScript 知识。我试图搜索教程来简化我的代码，但找不到任何教程。这是我的代码：

$(".trigger_slide1").hover(function () {
    $('.index-img-slide1').toggleClass("show");
});

$(".trigger_slide2").hover(function () {
    $('.index-img-slide2').toggleClass("show");
});

$(".trigger_slide3").hover(function () {
    $('.index-img-slide3').toggleClass("show");
});

$(".trigger_slide4").hover(function () {
    $('.index-img-slide4').toggleClass("show");
});

$(".trigger_slide5").hover(function () {
    $('.index-img-slide5').toggleClass("show");
});

这是我的 HTML 片段：

<div class="index-img">
  <div class="index-img-slide1"><span></span><img src="images/slide1.jpg" alt=""></div>
  <div class="index-img-slide2"><span></span><img src="images/slide2.jpg" alt=""></div>
  <div class="index-img-slide3"><span></span><img src="images/slide3.jpg" alt=""></div>
  <div class="index-img-slide4"><span></span><img src="images/slide4.jpg" alt=""></div>
  <div class="index-img-slide5"><span></span><img src="images/slide5.jpg" alt=""></div>
</div>

<div class="index-canvas">
  <div class="index-navigation-wrapper">
    <div class="container index-navigation-container dropup">
      <ul>
        <li class="trigger_slide1"><a href="">Home</a></li>
        <li class="trigger_slide2"><a href="">About</a></li>
        <li class="trigger_slide3"><a href="">Portfolios</a></li>
        <li class="trigger_slide4"><a href="">Quotes</a></li>
        <li class="trigger_slide5"><a href="">Contact</a></li>
      </ul>
    </div>
  </div>
</div>

jsfiddle: https://jsfiddle.net/gef91owt/

这几乎说明了我现在正在尝试做什么。有没有办法简化这个？

Answer 1

最好使用通用 [=24] 更改 html 和 class 结构=] 像这样：

<ul>        
    <li class="trigger_slide1 trigger_slide"><a href="">Home</a></li>
    <li class="trigger_slide2 trigger_slide"><a href="">About</a></li>
    <li class="trigger_slide3 trigger_slide"><a href="">Portfolios</a></li>
    <li class="trigger_slide4 trigger_slide"><a href="">Quotes</a></li>
    <li class="trigger_slide5 trigger_slide"><a href="">Contact</a></li>
</ul>

然后：

$(".trigger_slide").hover(function () {
    $(this).toggleClass("show");     
});

https://jsfiddle.net/dq3aLd4t/

Answer 2

将js（根据你的fiddle）改成

$('[class^="trigger_div"]').hover(function() {
    var i = $(this).index();
    $('.triggered-divs').children().eq(i).toggleClass('show');
});

https://jsfiddle.net/rrehan/gef91owt/1/

有人可以帮我简化这个 JQuery 代码吗？

Can someone help me simplify this JQuery code?

jquery

simplify