Question

我有一个页面，其中列出了包含在具有类广告容器的div中的内容。在该容器中有一个隐藏的div与类ad-contact。在广告类的悬停中，我想要动画显示广告信息。由于特定页面上有多个广告，我只想放置当前悬停的广告容器的广告信息。我的问题是，当您将鼠标悬停在任何广告上时，每页广告超过10个，所有的广告 - 联系divs slideDown而不是你正在悬停的那个。

$(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起作用

查看working demo here

Answer 3

你应该用事件来处理这个，首先你需要广告container.hover（函数（事件）{ event.target.children（）;

}）

然后this.show（）。延迟（1000）.hide（）;

复制粘贴时，代码示例提供可能无效，您必须在编辑器中编写自己的代码。

Jquery Selector多个类（this）

3 个答案: