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，如果有人可以看看并指出我错在哪里，我会很感激。）

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

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

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

Answer 2

尝试这种方法，而不是构建可能导致大量交换机案例的内容
演示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;
});

Answer 3

尝试这样的事情：

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 个答案: