jQuery. Не работает правильно

Question

У меня проблема с jQuery .not() не работает.

У меня есть таблица цен с 3 продуктами, когда вы наводите указатель мыши на каждый из продуктов, описание появляется, а затем исчезает на мыши, пока все работает нормально.

Однако проблема в том, что при загрузке страницы одного из трех продуктов (каждый удерживается в <aside>) будет иметь .selected класс применяется к нему, и мне нужна функция MouseEnter/отпуск, чтобы не работать на этом <aside>.

Единственное предостережение, что при нажатии любой из <button>'s в каждом <aside> удалит .selected класс от его текущего <aside> и обратиться к <button>'s <aside> родителей (я не включил JQ для этого, как это просто мертвый простой .addClass) ,

Код примера того, что у меня сейчас есть, спасибо в расширенном.

JQuery

$(".pricing3 aside").not('.selected').mouseenter(function() { 
$(".desc", this).stop().slideDown('slow'); 
}) 
.mouseleave(function() { 
$(".desc", this).stop().slideUp('slow'); 
}); 

HTML

<div class="pricing3"> 
    <aside> 
    <i class="fa fa-clock-o"></i> 
    <h3>1 Hour Pass</h3> 
    <p class="desc">Description</p> 
    <p class="pricing">£XX</p> 
    <button type="submit">BUY NOW</button> 
    </aside> 
    <aside class="selected"> 
    <i class="fa fa-clock-o"></i> 
    <h3>8 Hour Pass</h3> 
    <p class="desc">Description</p> 
    <p class="pricing">£XX</p> 
    <button type="submit">BUY NOW</button> 
    </aside> 
    <aside> 
    <i class="fa fa-clock-o"></i> 
    <h3>24-7-365 Access</h3> 
    <p class="desc">Description</p> 
    <p class="pricing">£XX</p> 
    <button type="submit">BUY NOW</button> 
    </aside> 
</div> 

Answer 1

Необходимость использования event delegation как выбор целевого элемента основан на динамическом состоянии

$(".pricing3").on('mouseenter', 'aside:not(.selected)', function() { 
    $(".desc", this).stop().slideDown('slow'); 
}).on('mouseleave', 'aside:not(.selected)', function() { 
    $(".desc", this).stop().slideUp('slow'); 
}); 

может быть записано несколько иначе, как

$(".pricing3").on({ 
    mouseenter: function() { 
     $(".desc", this).stop().slideDown('slow'); 
    }, 
    mouseleave: function() { 
     $(".desc", this).stop().slideUp('slow'); 
    } 
}, 'aside:not(.selected)') 

Answer 2

Поскольку класс смещается вы бы лучше проверить для класса внутри обработчика событий

$(".pricing3 aside").on('mouseenter mouseleave', function() { 
    if (!$(this).hasClass('selected')) { 
     $(".desc", this).stop().slideToggle('slow'); 
    } 
}); 

Answer 3

Если я вас правильно понимаю, проблема в том, что вы хотите удалить .selected, а затем mouseenter() для запуска на нем, как если бы у него не было .selected на нем в первую очередь?

Если это так, то вы должны прикрепить обработчик события выше дерева DOM, а также использовать on() для фильтрации вплоть до <aside> s Таким образом, вы можете флип/флопе класс все, что вы хотите, и обработчик события будет работайте, как ожидалось. Поскольку он закодирован, вы применяете фильтр только при загрузке страницы, поэтому изменение состояния класса не влияет.