0

我在 CSS 中有一个像这样工作的 div：SomeDiv 有另一个类，有时是 SomeRedDiv，有时是 SomeBlueDiv。当我在 SomeDiv 上使用鼠标时，我希望它添加 SomeYellowDiv 类。但是当我鼠标离开时，我希望每个 div 都返回到其初始状态，SomeRedDiv 或 SomeBlueDiv。这就是我所拥有的：

     <div class="SomeDiv SomeRedDiv"></div>
     <div class="SomeDiv SomeBlueDiv"></div>

    $('.SomeDiv').mouseenter(function () {

       // this makes all SomeDivs turn yellow
       $(this).removeClass().addClass('SomeDiv SomeYellowDiv');
    });

    $('.SomeDiv').mouseleave(function () {

       // here I want to use closure so that the function remembers
       // which class it initially was; SomeBlueDiv or SomeRedDiv
       $('this).removeClass().addClass('SomeDiv'); // add the initial color class
    });

我可以用全局来做到这一点，但我想看看闭包是否会让我的代码更好；我知道闭包的概念，它允许函数记住它们的状态，但我不知道如何让它在这里工作。

感谢您的建议。

4

2 回答 2

4

Clsoures don't apply here, since you have two unrelated functions.

Instead, you should use $(this).data(...), which stores arbitrary data associated with an element.

于 2012-07-13T13:26:42.790 回答
1

这里没有真正需要闭包 - 您只需在鼠标进入时将红色/蓝色类推入其他数据容器，然后在鼠标离开时恢复它。

$('.SomeDiv').mouseenter(function () {
    //remember the current colour class...
    $(this).data('orig-colour', $(this).is('.SomeDivBlue') ? 'Blue' : 'Red'));
    //...and now remove it and add yellow
    $(this).removeClass('SomeDivRed SomeDivBlue').addClass('SomeYellowDiv');
});

$('.SomeDiv').mouseleave(function () {
    //remove yellow and reinstate the original colour class
    $(this).removeClass('SomeDivYellow').addClass('SomeDiv'+$(this).data('orig-colour'));
});

另请注意，我只删除需要删除的类，而不是删除所有类然后根据需要重新添加的代码。

如果您有很多 div，您可能还想考虑委派事件，因为这更优化性能。这不是一个大的变化。

$('.SomeDiv').mouseenter(...

变成类似的东西

$('body').on('mouseenter', '.SomeDiv', ...

最后，我假设有一些编程原因说明你为什么需要删除一个类。如果目的纯粹是视觉上的，冒着指出显而易见的风险，你应该制作你的 CSS，让黄色类仅仅覆盖蓝色/红色类的效果，减少显式删除后者的需要。

于 2012-07-13T13:37:31.047 回答