Jquery 在mouseleave上更改类多次

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

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

这是我的html：

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

这是我的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');
    });

---

你想过这样的事情吗

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;
    }
});

var指数=1；
$（“.logo”）.mouseleave（函数（）{
$（this）.removeClass（“logo_u3;”+索引）；
指数+=1；
如果（指数这应该有效：

var logoNumber = 1;

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

我无耻地偷了小提琴作为我的例子：
是的，不要那样做

如果徽标的顺序不重要，则：

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

2） 创建一个函数，生成介于0和数组大小之间的随机索引

请参见此处以生成随机数：

3） 使用生成的随机数作为徽标数组索引，以获取图像的url

4） 使用jquery更新url

如果顺序很重要，则：

1） 按顺序将URL存储在javascript数组中

2） 创建一个全局索引变量

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

4） 在标记的每个鼠标上，调用递增函数并使用返回值作为URL。
这里是另一种方法

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


$（this）.addClass（“logo_1”）；index=1；$（this）.removeClass（“logo_1 logo_2 logo_3 logo_4 logo_5”）
将删除您刚才添加的类。这很有效，但我从“$（this.removeClass”（“logo_1 logo_2 logo_3 logo_4 logo_5”）中删除了logo_1）它删除了您刚才在上面一行中添加的类，因此它将显示一个空div。我不确定是否应该编辑您的答案或只是添加一条注释。谢谢您的解决！编辑：有人已经说过了。@Sppryor使代码更智能，以防您添加更多徽标类。也解决了问题。这里：…@Ani谢谢，但发布了一条同时：P
<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);
});