Question

我有一个脚本，每当用户将鼠标移入/移出盒子时动态添加一个类（无论何时，它都会使盒子变大）。我希望让这个过程循环，以便大盒子回到一个小盒子。我试图使用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>

Answer 1

下面的代码段会产生您想要的结果吗？

<强> 段：

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时逐个应用它们。

希望这有帮助。

Answer 2

Fiddle here

检查你的逻辑：你只需要一个事件监听器 - 它应该响应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);
});

试图让动态生成的类循环

2 个答案: