多次更改mouseleave上的类

Question

我的页面顶部有一个徽标，通过简单的悬停效果更改徽标颜色。我想做的是，每次用户将鼠标悬停在它上面时，徽标都会循环通过几种不同的悬停效果。第一次悬停徽标变为红色，下一次悬停徽标变为橙色，经过大约 5 种颜色，直到从红色重新开始。

我的想法是使用 jquery 删除旧类并添加一个具有新悬停效果的新类，直到最后我将原始类添加回来。我的代码目前在第一次悬停时将徽标更改为红色，然后在第二次悬停时更改为橙色，但随后它卡在了橙色上。

这是我的html：

    <div class="navbar-header">
        <div class="navbar-brand">
            <a href="/main" class="logo_1 logo"></a>
        </div>
    </div>

这是我的 CSS：

    .logo {
        height:44px;
        width:161px;
        display:block;
    }

    .logo_1 {background-image: url(../images/logo.png);}
    .logo_1:hover {background-image: url(../images/red_logo.png);}

    .logo_2 {background-image: url(../images/logo.png);}
    .logo_2:hover {background-image: url(../images/orange_logo.png);}

    .logo_3 {background-image: url(../images/logo.png);}
    .logo_3:hover {background-image: url(../images/green_logo.png);}

    .logo_4 {background-image: url(../images/logo.png);}
    .logo_4:hover {background-image: url(../images/blue_logo.png);}

    .logo_5 {background-image: url(../images/logo.png);}
    .logo_5:hover {background-image: url(../images/purple_logo.png);}

这是我的 jquery：

    $('.logo_1').mouseleave(function(){
       $(this).addClass('logo_2');
       $(this).removeClass('logo_1');
    });
    $('.logo_2').mouseleave(function(){
       $(this).addClass('logo_3');
       $(this).removeClass('logo_2');
    });
    $('.logo_3').mouseleave(function(){
       $(this).addClass('logo_4');
       $(this).removeClass('logo_3');
    });
    $('.logo_4').mouseleave(function(){
       $(this).addClass('logo_5');
       $(this).removeClass('logo_4');
    });
    $('.logo_5').mouseleave(function(){
       $(this).addClass('logo_1');
       $(this).removeClass('logo_5');
    });

Answer 1

这是另一种方式FIDDLE

<div class="lol img0" data-img="0"></div>

---

.lol {
    height:200px;
    width:300px;
}
.img0 {
    background:url("http://lorempixel.com/400/200/nature/1/") no-repeat;
}
.img1 {
    background:url("http://lorempixel.com/400/200/nature/2/") no-repeat;
}
.img2 {
    background:url("http://lorempixel.com/400/200/nature/3/") no-repeat;
}
.img3 {
    background:url("http://lorempixel.com/400/200/nature/4/") no-repeat;
}

---

$('.lol').mouseenter(function () {
    var data = $(this).attr('data-img');
    $(this).removeClass('img' + data);
    data++;
    if (data > 3) data = 0;
    $(this).attr('data-img', data);
    $(this).addClass('img' + data);
});

Answer 2

这应该有效：

var logoNumber = 1;

$('.logo').mouseleave(function(){
    var $this = $(this).removeClass('logo_' + logoNumber);
    logoNumber++;
    if(logoNumber > 5) logoNumber = 1;
    $this.addClass('logo_' + logoNumber);
})

我无耻地偷了Tim Nguyen小提琴作为我的例子：http://jsfiddle.net/bT4T5/1/

Answer 3

是的，不要那样做。

如果您的徽标顺序不重要，那么：

1) 将所有徽标 URL 放入 javascript 数组中。

2) 创建一个在 0 和数组大小之间生成随机索引的函数

查看这里生成随机数：Javascript random integer

3) 使用生成的随机数作为你的logos数组索引来获取图片的url。

4) 使用jquery更新url

如果顺序很重要，那么：

1) 按顺序将网址存储在 javascript 数组中。

2) 创建全局索引变量

3) 创建一个递增全局变量并返回数组中下一个图像url的函数

4) 在每次鼠标悬停在标签上时，调用增量函数并将返回值用作 URL。

Answer 4

你有没有想过这样的事情？

var index = 1;
$(".logo").mouseleave(function() {
    $(this).removeClass("logo_"+index);

    index +=1;

    if(index <= 5) {
       $(this).addClass("logo_"+index);
    }
    else {
        $(this).addClass("logo_1");
        index=1;
    }
});

例如：http://jsfiddle.net/ntim/bT4T5/