Question

我想在div子元素上制作一个动画，当我将一个不同div的子节点悬停时，这是我的代码：

＆＃13;

$('.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');
});

＆＃13;

那么我该如何优化呢？

Answer 1

这是一个广泛的问题。

您可以创建这样的功能

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

并且要求将此函数称为

hoverChild(n) where n =1,2,3....

Answer 2

您可以使用$(this).index()获取hovered项目

的索引

$('.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>

Answer 3

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

如何优化Javascript功能

3 个答案: