讓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')); 
});