选择当前元素 jquery - 多个 div答案

【问题标题】：Select the current element jquery - multiple divs选择当前元素 jquery - 多个 div
【发布时间】：2015-03-06 01:18:36
【问题描述】：

我是 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？

【问题讨论】：

标签： javascript jquery hover jquery-hover

【解决方案1】：

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

$(".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

【讨论】：

谢谢！我已经尝试过了，但对我没有用。我使用了这样的东西：$(this).find("".home-featured ul li .feat_container ul li .feat_bg_img .layer").addClass("lilith");。也许是因为我使用了完整路径，这会影响什么吗？
@MarianIoan 因为home-featured 不是feat_pic 元素的后代

【解决方案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");
});

【讨论】：

【解决方案3】：

您可以使用“this”而不是在您的案例中指定类名

$(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");
});

【讨论】：