Question

我正在尝试一些jQuery，还有一部分我不明白。我对谷歌也很难，因为我不太确定术语 - 因此我问这个问题并解释我的确切意图。

这是我的HTML标记。

<div class="contentLarge">

<a href=""><header>Use responsive design.</header></a>

<div class="contentFlex">
    <div class="contentFlex1"></div>
    <div class="contentFlex2"></div>
</div>

现在我想要的是当我将鼠标悬停在锚链接上时，整个contentLarge容器的背景会发生变化。我的页面上有几个这样的容器。

这是jQuery：

$(document).ready(function(){
    $(".contentLarge header").mouseenter(function(){
        $(".contentLarge").css({"background-color": "red"})
    });
});

现在我明白了，现在当我悬停时 - 每个contentLarge容器都会将它的背景变为红色。这不是我想要的。

但是当我尝试使用$（this）选择器在这个函数中进行目标时 - 它是改变的HEADER，而不是contentLarge。像这样;

$(document).ready(function(){
    $(".contentLarge header").mouseenter(function(){
        $("this").css({"background-color": "red"})
    });
});

如何编写它以使$（this）成为目标容器 - 仅将其背景更改为红色而不是所有容器，或仅更改标题。

Answer 1

使用parent()指向包含您悬停链接的.contentLarge容器：

$(document).ready(function(){
    $(".contentLarge header").mouseenter(function(){
        $(this).parent().css({"background-color": "red"})
    });
});

另一种选择是使用closest()，它会搜索与.contentLarge类最接近的内容。在.parent().parent().parent()...和.header之间存在多个图层时，有助于防止使用.contentClass。

$(document).ready(function(){
    $(".header").mouseenter(function(){
        $(this).closest('.contentLarge').css({"background-color": "red"})
    });
});

使用jQuery来定位（this）不按预期工作

1 个答案: