Jquery 选择器多个类（这个）

Question

我有一个页面，列出了包含在带有广告容器类的 div 中的内容。在该容器中，有一个隐藏的 div，其类为 ad-contact。在广告类悬停时，我想对广告信息的显示进行动画处理。由于特定页面上有多个广告，我只想将当前悬停的广告容器的广告信息滑入。我的问题是，由于当您将鼠标悬停在任何广告上时，每个页面上有超过 10 个广告，所有广告联系人 div 都会向下滑动，而不是您将鼠标悬停在其上方的 div。

$(document).ready(function() {
    $('.ad-container').hover(
                             function(){
                                 $(".ad-contact").slideDown(1000);
                             },
                             function(){
                                 $(".ad-contact").slideUp(1000);
    });

});

我认为，（这个）在这里使用，但我不确定。这确实会给我带来启发。

<div class="ad-container">

        <div class="ad-title">title<span class="ad-title-img">(pic)</span></div>
        <div class="ad-description">texttext</div>
        <div class="ad-contact" style="display:none">contact poster</div>
        <div class="ad-sellerinfo" style="display:none">* Verified ***-****<br />
Paid Member</div>
      </div>

Answer 1

jQuery 构造函数接受第二个参数，该参数可用于覆盖选择的上下文。像这样的东西应该有效：

$(document).ready(function() {
    $('.ad-container').hover(
                             function(){
                                 $(".ad-contact", this).slideDown(1000);
                             },
                             function(){
                                 $(".ad-contact", this).slideUp(1000);
    });

});

另外，值得一提的是， $(".ad-contact", this) 在内部转换为： $(this).find(".ad-contact" ) 所以你可以使用这个来代替，它可能会稍微快一些。

Answer 2

您可以使用 .children() 选择器：

$(this).children(".ad-contact").slideDown(1000);

这样您只会如果 ad-contact 类是上下文中对象的子级（当前悬停的对象），则对类 ad-contact 进行操作

请参阅 这里有工作演示

Answer 3

你应该使用事件来处理这个，
首先你需要像
广告容器.hover(函数(事件){
event.target.children();

})

然后 this.show().delay(1000).hide();

当复制粘贴时，提供的代码示例可能不起作用，您必须在编辑器中编写自己的代码。