尝试让动态生成的类循环

Attempting to get dynamically generated classes to loop

本文关键字：循环 动态      更新时间：2023-09-26

我有一个脚本，每次用户将鼠标移入/移出框时，它都会动态添加一个类（无论何时，它都会使框变大）。我希望使这个过程循环，以便大盒子回到一个小盒子。我尝试使用 if 语句来检查该框是否具有"大"类，然后它将类恢复为"小"，希望文档会重复。没用。你能建议使用类似的代码来实现这一点吗？我希望让它与 4 个单独的类一起工作。在这里小提琴：http://jsfiddle.net/cs31g61q/1/

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>

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

片段： 

var box = $('#box');
var classes = ['small', 'medium', 'large'];
var iterator = 0;
box.mouseenter(function () {
    $(this).removeClass();
    $(this).addClass(classes[iterator]);
    iterator += 1;
    iterator = iterator > classes.length - 1 ? 0 : iterator;
});
.small {
    width: 100px;
    height:100px;
    background: #000;
}
.medium {
    width: 200px;
    height: 200px;
    background: green;
}
.large {
    width:400px;
    height: 400px;
    background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
    <div id="box" class="small"></div>
</div>

这基本上是遍历一组类，每次鼠标进入#box时逐个应用它们。

希望这有帮助。

在这里小提琴。

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

// 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);
});
相关文章：