jquery - 将鼠标悬停在同一元素上时重复更改图像

Question

我有一个带有图像的 div，下面是菜单。我需要的是每当我将鼠标悬停在某个菜单项上时图像就会发生变化。目前总共有 5 张图像，每次我将鼠标悬停在 Logo 上时，我希望该图像更改为下一张图像，直到到达末尾，然后从图像编号开始循环。 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 ，如果有人能看一下并指出我错在哪里，我将不胜感激:)

Answer 1

这不是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 变量并在每次鼠标悬停时递增它，然后使用 swtich 代替:

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

Demo在 jsFiddle.这不是最好的解决方案，但可能会帮助您入门。