1

我有一个带有图像的 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;
    }
})

这是小提琴，如果有人可以看看并指出我错在哪里，我将不胜感激:)

4

3 回答 3

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

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

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

于 2013-03-01T00:57:54.010 回答
1

尝试这种方法，而不是构建最终可能会产生大量开关案例
演示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;
});
于 2013-03-01T00:58:06.987 回答
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/

于 2013-03-01T00:58:39.530 回答