简体   繁体   中英

jQuery .not not functioning correctly

I'm having a problem with jQuery .not() not working.

I've got a pricing table with 3 products, when you mouse over each of the products a description appears and then disappears on mouse out so far everything works fine.

The problem however is that on page load one of the three products (each held in an <aside> ) will have a .selected class applied to it and I need the mouseenter/leave function to not run on this <aside> .

The only caveat is that clicking any of the <button>'s in each <aside> will remove the .selected class from it's current <aside> and apply to the <button>'s <aside> parent (I've not included the JQ for this as it's just a dead simple .addClass ).

Code example of what I currently have is below, thanks in advanced.

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>

Need to use event delegation as the target element selection is based on a dynamic state

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

It can be written slightly differently as

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

As the class is shifting you'd be better off checking for the class inside the event handler

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

If I understand you correctly, the problem is that you want the .selected to be removed, and then the mouseenter() to run on it as if it hadn't had the .selected on it in the first place?

If this is the case, you should attach your event handler higher up the DOM tree, and use on() to filter down to the <aside> s This way you can flip/flop the class all you want, and the event handler will work as expected. As it's coded, you are only applying the filter at page load, so the state change of the class has no effect.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM