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

最好使用如下通用类更改 html 和类结构：

<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（根据你的小提琴）改为

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

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

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

2 个答案: