jQuery Kinder nur auswählen, wenn Container keine bestimmte Klasse haben

Question

Ich möchte Hover-Funktion an Kinder von div, sondern nur, wenn dieses div keine bestimmte Klasse haben. Um meine Absicht zu zeigen - ich will Hover-Funktion ausgelöst bei der Maus zu Eingabe einer beliebigen „.hover-Taste“ Element, SOFERN Container „.Column“ Klasse hat „.disabled“ hinzugefügt, um es:

$('.hover-button').hover(function() { 
 
    //showing tooltip 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="column"> 
 
    <div class="hover-button"></div> 
 
    <div class="hover-button"></div> 
 
    <div class="hover-button"></div> 
 
</div> 
 

 
<div class="column disabled"> 
 
    <div class="hover-button"></div> 
 
    <div class="hover-button"></div> 
 
    <div class="hover-button"></div> 
 
</div>

Answer 1

Sie können den :not-Selektor von jQuery verwenden. Werfen Sie einen Blick auf diesen Code, vor allem diese Schnipsel

.column:not(.disabled) > .hover-button

$('.column:not(.disabled) > .hover-button').on("mouseover", function() { 
 
    $(this).css({"background": "gold"}); 
 
}).on("mouseout", function() { 
 
    $(this).css({"background": "white"}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="column"> 
 
    <div class="hover-button">Hover Here</div> 
 
    <div class="hover-button">And Here</div> 
 
    <div class="hover-button">And Here</div> 
 
</div> 
 

 
<div class="column disabled"> 
 
    <div class="hover-button">But not here</div> 
 
    <div class="hover-button">Or here</div> 
 
    <div class="hover-button">Or here</div> 
 
</div>

Answer 2

Sie können prüfen, um zu sehen, ob das übergeordnete div die 'behindert' Klasse wie folgt hat:

if ($(this).parent().hasClass('disabled')) { 
    return false; 
} 

Answer 3

Verwenden Sie die Not-Methode

$('.column:not(.disabled)') 

Answer 4

Sie können :not() in einem Selektor verwenden, um Elemente auszuschließen, die mit einem anderen Selektor übereinstimmen.

Wenn sich die Klasse jedoch dynamisch ändert, müssen Sie die Delegierungsbindung und nicht die normale Ereignisbindung verwenden.

$(document).on({ 
    mouseenter: function() { 
     // show tooltip 
    }, 

    mouseleave: function() { 
     // remove tooltip 
    } 
}, '.column:not(.disabled)'); 

Ich hatte mouseenter und mouseleave zu verwenden, da hover kein wirkliches Ereignis ist, so dass Sie es nicht binden, wenn delegieren.