Select 当前元素 jquery - 多个 div

Question

我是 jquery 的新手，我想了解如何在我的情况下悬停当前元素：

<div class="feat_pic">
  <div class="feat_bg_img" style="background-image: url(<?php echo $src[0]; ?> );"><div class="layer"></div></div>
  <a class="home-feat-title" href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a>
</div>

<div class="feat_pic">
  <div class="feat_bg_img" style="background-image: url(<?php echo $src[0]; ?> );"><div class="layer"></div></div>
  <a class="home-feat-title" href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a>
</div>

<div class="feat_pic">
  <div class="feat_bg_img" style="background-image: url(<?php echo $src[0]; ?> );"><div class="layer"></div></div>
  <a class="home-feat-title" href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a>
</div>

我知道我已经接近我想要完成的目标了，这里是代码：

$(".feat_pic").hover(function(){
        $(".home-featured ul li .feat_container ul li .feat_bg_img .layer").addClass("lilith");
        $(".home-featured ul li a.home-feat-title").addClass("satan");
    }, function(){
        $(".home-featured ul li .feat_container ul li .feat_bg_img .layer").removeClass("lilith");
        $(".home-featured ul li a.home-feat-title").removeClass("satan");
    });

如何让 add.Class 仅在当前 .feat_pic 上工作？

Answer 1

您可以在事件处理程序中使用 this 来引用悬停的 feat_pic 元素，然后您可以使用 .find() 找到 .layer 和 .home-feat-title 里面的元素 like

$(".feat_pic").hover(function () {
    $(this).find(".feat_bg_img .layer").addClass("lilith");
    $(this).find("a.home-feat-title").addClass("satan");
}, function () {
    $(this).find(".feat_bg_img .layer").removeClass("lilith");
    $(this).find("a.home-feat-title").removeClass("satan");
});

演示：Fiddle

Answer 2

$(".feat_pic").hover(function(){
    var me = $(this); // current .feat_pic
    me.addClass('className');
    $(".home-featured ul li .feat_container ul li .feat_bg_img .layer").addClass("lilith");
    $(".home-featured ul li a.home-feat-title").addClass("satan");
}, function(){
    $(".home-featured ul li .feat_container ul li .feat_bg_img .layer").removeClass("lilith");
    $(".home-featured ul li a.home-feat-title").removeClass("satan");
});

Answer 3

您可以使用 "this" 而不是在您的案例中指定 class 名称

$(this).hover(function(){
    $(".home-featured ul li .feat_container ul li .feat_bg_img .layer").addClass("lilith");
    (".home-featured ul li a.home-feat-title").removeClass("satan");
});

Select 当前元素 jquery - 多个 div

Select the current element jquery - multiple divs

javascript

jquery

hover

jquery-hover