javascript - 更改没有 ID 的特定实例

Question

好吧，假设我在一个页面上有多个链接，并且我希望链接在您将鼠标悬停在链接上时更改背景颜色。我会使用这段代码:

$(function() {
    $('a').mouseover(function() {
        $('a').css('background-color', 'black');
    });
}); 
$(function() {
    $('a').mouseleave(function() {
        $('a').css('background-color', 'white');
    });
});

这段代码的问题是，当你将鼠标滑过一个 a 时，所有链接都会改变颜色。我可以给每个人一个特定的 ID，并为每个人制定一个特定的功能，但是有没有更有效的方法来做到这一点？编辑:此外，我可以做什么来将原始背景颜色设置回原来的样子。如果我将背景变回白色，它可能一开始就不是白色的。我该如何解决这个问题？

Answer 1

在您的版本中，您使用 $('a') 来调用 .css() 函数。问题是 $('a') 选择页面上的所有 a 节点，而不仅仅是您将鼠标移到的节点。在鼠标悬停回调函数中，this 关键字引用作为事件发起者的节点。因此，当您在该函数中执行 $(this) 时，您将创建该节点的 jQuery 对象(称为包装集)。现在您可以调用其上的所有 jquery 函数，不包括 .css() 函数。所以你开始吧:

$(function() {
    $('a').mouseover(function() {
        $(this).css('background-color', 'black');
    });
}); 
$(function() {
    $('a').mouseleave(function() {
        $(this).css('background-color', 'white');
    });
});