Question

我正在使用CSS Image sprites对元素进行翻转效果，将鼠标悬停时应用的新类分配给属性data-toggle-class，下面是代码（我现在这是微型性能改进和做法预优化并不好）

    $("*[data-toggle-class]").hover(function(ev){
        var a = $(this);
        a.toggleClass(a.attr("data-toggle-class"))
    });

如何缓存data-toggle-class属性，而不是每次悬停发生时都检索它。
即使我使用Image sprite，在切换效果发生之前会有一个小的延迟。这是已知问题吗

Answer 1

我只能回答有关缓存的问题（主要是请参阅下面的分隔符下的注释），您可以使用闭包来执行此操作：

$("*[data-toggle-class]").each(function() {
    var $elm = $(this),
        cls = $elm.attr('data-toggle-class');
    $elm.hover(function() {
        $elm.toggleClass(cls);
    });
});

它的作用是，它不是在悬停事件期间为所有匹配元素调用单个函数，而是为每个元素生成一个单独的函数，其中函数关闭对元素的jQuery包装器的引用以及其data-toggle-class属性的副本。它会换掉大小（更多的功能=更多的内存，尽管你必须有一个很多这些才能开始重要）以提高速度。

如果您的目标是让班级悬停而不是在没有悬停时使用它，我可能会明确地这样做：

$("*[data-toggle-class]").each(function() {
    var $elm = $(this),
        cls = $elm.attr('data-toggle-class');
    $elm.hover(
        // Start hover
        function() {
            $elm.addClass(cls);
        },
        // Stop hover
        function() {
            $elm.removeClass(cls);
        }
    );
});

你说过

我知道这是微型性能改进并且进行预优化并不是很好

...但我想强调一下。以上方法可行，可能不会导致过多的内存使用，并会导致微小性能增强，但我倾向于认为增强将低于阈值人类的感知。

我想知道你真的需要这个类和JavaScript代码吗？除非您需要支持IE6，否则:hover CSS伪类完全是出于此目的，并且由浏览器而不是JavaScript代码本地处理（读取：更快）。例如：

[data-toggle-class] {
    color: green;
}
[data-toggle-class]:hover {
    color: blue;
}

...将使data-toggle-class属性的任何元素正常绿色，但悬停时为蓝色。如果您需要根据属性的值执行不同的操作，则可以执行以下操作：

[data-toggle-class='foo'] {
    color: green;
}
[data-toggle-class='foo']:hover {
    color: blue;
}
[data-toggle-class='bar'] {
    color: black;
}
[data-toggle-class='bar']:hover {
    color: red;
}

data-toggle-class="foo"的元素通常为绿色，悬停时为蓝色; data-toggle-class="bar"标记为正常黑色，悬停时为红色。无需JavaScript。

在上文中，您了解color只是一个例子;如果您使用精灵，我希望您使用background和background-position。

以下是CSS技术的正确示例（live copy | source）：

CSS：

.arrow {
    width: 40px;
    height: 40px;
    background-image: url(http://cdn.sstatic.net/stackoverflow/img/sprites.png);
    background-repeat: none;
    display: inline-block;
}
.style1 {
    background-position: 0px -220px;
}
.style1:hover {
    background-position: 0px -320px;
}
.style2 {
    background-position: 0px -260px;
}
.style2:hover {
    background-position: 0px -290px;
}

HTML：

<div class="arrow style1"></div>
<div class="arrow style2"></div>

注意如何在没有JavaScript的情况下以声明方式控制出现哪个箭头。当然，现在，如果您出现箭头的条件比这更复杂，您可能必须转到JS。我只是说，对于大多数简单的悬停操作，它不是必需的。

jQuery优化对悬停事件的属性访问

1 个答案: