將鼠標懸停在同一元素上時反覆更改圖像

Question

我有一個帶有圖像的div，下面有菜單。我需要的是每當我將鼠標懸停在其中一個菜單項上時，圖像就會改變。現在總共有5張圖片，每次我將鼠標懸停在徽標上時，我都希望該圖片更改爲下一張圖片，直到到達最後，然後從圖片編號開始循環。 1.

我第一次使用switch語句，我可能做錯了，因爲我無法讓它工作。現在我可以從圖像1更改爲2，但隨後停止。

我的代碼如下：

HTML

<div> 
    <img id="img" src="http://placekitten.com/200/300" /> 
</div> 
<nav> 
    <ul> 
     <li id="logo"><a href="">logo</a></li> 
     <li><a href="">menu item</a></li> 
     <li><a href="">menu item</a></li> 
    </ul> 
</nav> 

jQuery的

$('#logo').bind("mouseover", function(){ 
    var currentimage = $('#img').attr('src',"http://placekitten.com/202/302"); 

    switch (currentimage) { 
     case 0: 
      $('#img').attr('src',"http://placekitten.com/205/300"); 
      break; 
     case 1: 
      $('#img').attr('src',"http://placekitten.com/200/305"); 
      break; 
     case 2: 
      $('#img').attr('src',"http://placekitten.com/200/300"); 
      break; 
    } 
}) 

Here's the fiddle，我會很感激，如果有人可以看看，並指出其中i」米錯:)

Answer 1

嘗試是這樣的：

var imgs = [ 
    'http://placekitten.com/205/300', 
    'http://placekitten.com/200/305', 
    'http://placekitten.com/200/300' 
]; 

var $img = $('#img'); 
$('#logo').on('mouseover', function() { 
    var current = imgs.indexOf($img.attr('src')); 
    $img.attr('src', imgs[++current] || imgs[0]); 
}); 

演示：http://jsfiddle.net/xwwzW/14/

Answer 2

這不是如何switch工作。 switch就像是一個的if-else鏈：

if (currentimage == 0) 
    $('#img').attr('src',"http://placekitten.com/205/300"); 
else if (currentimage == 1) 
    $('#img').attr('src',"http://placekitten.com/200/305"); 
else if (currentimage == 2) 
    $('#img').attr('src',"http://placekitten.com/200/300"); 

然而，currentimage不0，1或2，這是一個jQuery對象。當您撥打：

var currentimage = $('#img').attr('src',"http://placekitten.com/202/302"); 

你圖像的src屬性設置爲"http://placekitten.com/202/302"，然後返回圖像對象本身。因此，switch聲明將不會輸入任何case。

所以，你需要找到一個替代解決方案。一個方法是創建一個count變量和遞增它每次mouseover，並就代替使用swtich：

var count = 0; 
... 
count = (count+1)%3; 
switch (count) { 

Demo在的jsfiddle。不是最好的解決方案，但可以幫助您開始。

Answer 3

試試這個方法，而不是構建的內容可能最終的開關情況下，大規模的名單
演示http://jsfiddle.net/xwwzW/9/

var images=['http://placekitten.com/202/302', 
      'http://placekitten.com/205/300', 
      'http://placekitten.com/200/305', 
      'http://placekitten.com/200/300']; 
var currentimage=0; 

$('#logo').on("mouseover", function(){ 
    //console.log(currentimage); 
    $('#img').attr('src', images[currentimage]); 
    currentimage++; 
    if (currentimage>images.length-1) currentimage=0; 
});