Javascript 试图使动态生成的类循环

我有一个脚本，每当用户将鼠标移入/移出框时（无论何时，它都会使框变大），它都会动态地添加一个类。我希望使这个过程循环，这样大盒子就可以回到小盒子。我尝试使用if语句检查该框是否具有“large”类，然后它会将该类恢复为“small”，希望文档能够重复自身。没用。您能建议使用类似的代码实现这一点的方法吗？我希望能在4个独立的班级中使用。在这里拉小提琴：

var container=$（“#container”）；
变量框=$（“#框”）；
box.mouseenter（函数（）{
$（'#box'）。删除类（“小”）；
$（'#box'）.addClass（“中”）；
});
box.mouseleave（函数（）{
container.on（“mouseenter”，“#box”，function（））{
$（此）.removeClass（“中”）；
$（此）.addClass（“大型”）；
});
});

下面的代码片段是否产生了您想要的结果

片段：

var-box=$（“#box”）；
变量类=[‘小’、‘中’、‘大’]；
var迭代器=0；
box.mouseenter（函数（）{
$（this.removeClass（）；
$（this）.addClass（类[迭代器]）；
迭代器+=1；
迭代器=迭代器>classes.length-1？0：迭代器；
});
.small{
宽度：100px；
高度：100px；
背景：#000；
}
.中等{
宽度：200px；
高度：200px；
背景：绿色；
}
.大{
宽度：400px；
高度：400px；
背景：蓝色；
}
下面的代码片段是否产生了您想要的结果

片段：


var-box=$（“#box”）；
变量类=[‘小’、‘中’、‘大’]；
var迭代器=0；
box.mouseenter（函数（）{
$（this.removeClass（）；
$（this）.addClass（类[迭代器]）；
迭代器+=1；
迭代器=迭代器>classes.length-1？0：迭代器；
});
.small{
宽度：100px；
高度：100px；
背景：#000；
}
.中等{
宽度：200px；
高度：200px；
背景：绿色；
}
.大{
宽度：400px；
高度：400px；
背景：蓝色；
}
下面的代码片段是否产生了您想要的结果

片段：


var-box=$（“#box”）；
变量类=[‘小’、‘中’、‘大’]；
var迭代器=0；
box.mouseenter（函数（）{
$（this.removeClass（）；
$（this）.addClass（类[迭代器]）；
迭代器+=1；
迭代器=迭代器>classes.length-1？0：迭代器；
});
.small{
宽度：100px；
高度：100px；
背景：#000；
}
.中等{
宽度：200px；
高度：200px；
背景：绿色；
}
.大{
宽度：400px；
高度：400px；
背景：蓝色；
}
下面的代码片段是否产生了您想要的结果

片段：


var-box=$（“#box”）；
变量类=[‘小’、‘中’、‘大’]；
var迭代器=0；
box.mouseenter（函数（）{
$（this.removeClass（）；
$（this）.addClass（类[迭代器]）；
迭代器+=1；
迭代器=迭代器>classes.length-1？0：迭代器；
});
.small{
宽度：100px；
高度：100px；
背景：#000；
}
.中等{
宽度：200px；
高度：200px；
背景：绿色；
}
.大{
宽度：400px；
高度：400px；
背景：蓝色；
}


检查您的逻辑：您只需要一个事件监听器-它应该响应mouseenter或mouseleave并循环遍历类（小、中、大）。
下面是一个非常简单的方法，如上面的小提琴所示




检查您的逻辑：您只需要一个事件监听器-它应该响应mouseenter或mouseleave并循环遍历类（小、中、大）。
下面是一个非常简单的方法，如上面的小提琴所示




检查您的逻辑：您只需要一个事件监听器-它应该响应mouseenter或mouseleave并循环遍历类（小、中、大）。
下面是一个非常简单的方法，如上面的小提琴所示




检查您的逻辑：您只需要一个事件监听器-它应该响应mouseenter或mouseleave并循环遍历类（小、中、大）。
下面是一个非常简单的方法，如上面的小提琴所示



所有类都需要仅应用于
#box
？这里的
#container
的角色是什么？#container的角色用于.on（）函数。我读过，要检查动态添加的类，最好有一个这样的容器（我知道您也可以使用body，但我将在代码的顶部添加）这样的东西？所有类都需要仅应用于
#box
？这里的
#container
的角色是什么？#container的角色用于.on（）函数。我读过，要检查动态添加的类，最好有一个这样的容器（我知道您也可以使用body，但我将在代码的顶部添加）这样的东西？所有类都需要仅应用于
#box
？这里的
#container
的角色是什么？#container的角色用于.on（）函数。我读过，要检查动态添加的类，最好有一个这样的容器（我知道您也可以使用body，但我将在代码的顶部添加）这样的东西？所有类都需要仅应用于
#box
？这里的
#container
的角色是什么？#container的角色用于.on（）函数。我读过，要检查动态添加的类，最好有一个这样的容器（我知道您也可以使用body，但我将在代码的顶部添加）这样的东西？是的。我甚至没有想过使用一个数组，这需要更少的时间
var container=$("#container");
var box=$("#box");

box.mouseenter(function(){
    $('#box').removeClass("small");
    $('#box').addClass("medium");
});

box.mouseleave(function(){
    container.on("mouseenter", "#box", function(){
    $(this).removeClass("medium");
    $(this).addClass("large");
    });
});

<div id="container">
    <div id="box" class="small">
    </div>
</div>

// Set up the event listener: every mouseenter or mouseleave
$(document).on('mouseenter mouseleave', "#box", function(){
    var currentClass = $('#box').attr("class");
    var newClass = ''; // TBD in switch statement.
    switch(currentClass) {
        case('small'):
            newClass = 'medium';
            break;
        case('medium'):
            newClass = 'large';
            break;
        case('large'):
        default:
            newClass = 'small';
            break;
    }
    // Remove the current class, add new one.
    $('#box').removeClass();
    $('#box').addClass(newClass);
});