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

【问题标题】：Change image repeatedly when hovering over same element将鼠标悬停在同一元素上时重复更改图像
【发布时间】：2013-03-01 00:50:41
【问题描述】：

我有一个带有图像的 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，如果有人能看一下并指出我错在哪里，我将不胜感激:)

【问题讨论】：

标签： jquery switch-statement

【解决方案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 变量并在每个mouseover 上递增它，然后使用swtich 代替：

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

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

【讨论】：

感谢您的解释！

【解决方案2】：

试试这样的：

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/

【讨论】：

【解决方案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;
});

【讨论】：