让Jquery悬停脚本更有效

Question

这是我的第一个问题，所以请温和。我已经编写了一个脚本来根据我悬停的文本更改图片，但我知道我的脚本看起来像是由小学生写的。我在jQuery初期，但如果你们可以帮助我使它更清洁并且不那么重复，那就太好了。谢谢。 这是我的demo的代码。

$(document).ready(function() { 
    $('.small li:nth-child(1)').hover(function() { 
    $('.inner img').attr('src', 'http://www.clipartbest.com/cliparts/niX/o44/niXo44qbT.png'); 
    }); 
    $('.small li:nth-child(2)').hover(function() { 
    $('.inner img').attr('src', 'http://www.i2clipart.com/cliparts/8/c/9/1/clipart-plane-8c91.png'); 
    }); 
    $('.small li:nth-child(3)').hover(function() { 
    $('.inner img').attr('src', 'http://www.clipartbest.com/cliparts/niX/o44/niXo44qbT.png'); 
    }); 
    $('.small li:nth-child(4)').hover(function() { 
    $('.inner img').attr('src', 'http://www.i2clipart.com/cliparts/8/c/9/1/clipart-plane-8c91.png'); 
    }); 
    $('.small li:nth-child(5)').hover(function() { 
    $('.inner img').attr('src', 'http://www.clipartbest.com/cliparts/niX/o44/niXo44qbT.png'); 
    }); 
}); 

Answer 1

为了简化的jQuery，您将需要指示哪个图像与li去的一些其他手段。有这样做的几种方法，但一个是将li节点上使用data-属性：

<li data-hoverimg="http://www.clipartbest.com/cliparts/niX/o44/niXo44qbT.png"> 

通过这种方式，你可以简单地写：

$('.small li').mouseover(function() { 
    $('.inner img').attr('src', $(this).data('hoverimg')); 
});