javascript - 如何优化Javascript函数

Question

当我将鼠标悬停在不同 div 的子元素上时，我想在 div 子元素上制作动画，这是我的代码:

$('.section li:nth-child(1)').hover(function(){
    $('.section2 li:nth-child(1)').toggleClass('is-over');
});
		
$('.section li:nth-child(2)').hover(function(){
    $('.section2 li:nth-child(2)').toggleClass('is-over');
});

$('.section li:nth-child(3)').hover(function(){
    $('.section2 li:nth-child(3)').toggleClass('is-over');
});

$('.section li:nth-child(4)').hover(function(){
    $('.section2 li:nth-child(4)').toggleClass('is-over');
});

那么我该如何优化它呢？

Answer 1

您可以使用$(this).index()来获取悬停项的索引

$('.section li').hover(function(){
  var index = $(this).index()+1;
  $('.section2 li:nth-child('+index+')').toggleClass('is-over');
});

.is-over {
  color : red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="section">
    <li>Step 1</li>
    <li>Step 2</li>
</ul>

<ul class="section2">
    <li>Step 11</li>
    <li>Step 22</li>
</ul>