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一起使用。有几种方法可以做到这一点，但一种方法是在data-节点上使用li属性：

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

这样，您可以简单地写：

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

使Jquery悬停脚本更有效

1 个答案: