Jquery Selector несколько классов (это)

Question

У меня есть страница со списком контента, который содержится в div с классом ad-container. в этом контейнере есть скрытый div с классом ad-contact. при наведении курсора на рекламный класс я хочу анимировать показ рекламной информации. поскольку на отдельной странице несколько объявлений, я хочу, чтобы в них вставлялась только информация о текущем рекламном контейнере. Моя проблема заключается в том, что если при наведении курсора на любую из этих страниц на странице более 10 объявлений, все рекламные контакты - divDown, а не тот, над которым вы наводите курсор.

$(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 принимает 2-й параметр, который можно использовать для переопределения контекста выбора. Примерно так должно работать:

$(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, только если он является дочерним по отношению к объекту в контексте (который в данный момент находится в объекте)

См. рабочую демонстрацию здесь

Answer 3

Вы должны использовать событие для обработки этого, сначала вам нужно, например, ad-container.hover (function (event) {event.target.children ();

})

, а затемthis.show (). delay (1000) .hide ();

, предоставляемый примером кода, может не работать, если при копировании вставьте свой собственный код в редактор.