jquery - jQuery 错误：未捕获的 TypeError：无法使用“in”运算符在未定义中搜索“backgroundColor”

Question

$('.metro_menu_button').data('oldColor', $(this).css('background-color'));

$('.metro_menu_button').hover(function () {
    $(this).stop().animate({
        backgroundColor: '#303030'
    }, 300);

}, function () {

    $(this).stop().animate({
        backgroundColor: $(this).data('oldColor')
    }, 300);

});

至于标题，上面的 jQuery 代码（在 DOM 就绪上执行）正在返回此错误

未捕获的类型错误：无法使用“in”运算符在未定义中搜索“backgroundColor”

为什么是这样？我究竟做错了什么？

---

我正在尝试做一个按钮，它在悬停时会改变颜色，当鼠标离开时，它会恢复到原来的颜色。我无法对值进行硬编码：我需要它灵活并自己记住旧的背景颜色。以下代码可以正常工作，但是如果我将鼠标移入和移出太快，它将“忘记”原始颜色。

$('.metro_menu_button').hover(function () {

    $(this).data('oldColor', $(this).css('background-color'));

    $(this).stop().animate({
        backgroundColor: '#303030'
    }, 300);

}, function () {

    $(this).stop().animate({
        backgroundColor: $(this).data('oldColor')
    }, 300);

});

我需要保存oldColorDOMReady，而不是每次鼠标进入时。换句话说，我需要使用第一个代码，但这会引发错误。我能做些什么？

Answer 1

您也许可以使用 jQuery 的“每个”功能：

$('.metro_menu_button').each(function() {
    $(this).data('oldColor', $(this).css('background-color'));
});

'each' 应该为每个匹配的节点运行它；您的原件可能没有正确的“this”值。