仅当容器没有特定类时，jQuery 才选择子项

Question

我想将悬停功能附加到 div 的子级，但前提是此 div 没有特定的类。为了说明我的意图 - 我希望鼠标进入任何“.hover-button”元素时触发悬停功能，除非容器“.column”添加了“.disabled”类：

 $('.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

您可以在选择器中使用:not() 来排除与另一个选择器匹配的元素。

但如果类会动态变化，则需要使用委托绑定，而不是普通的事件绑定。

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

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

我不得不使用mouseenter和mouseleave，因为hover不是一个真实的事件，所以你不能在委托时绑定它。

Answer 2

使用 Not 方法

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

Answer 3

您可以像这样检查父 div 是否具有“禁用”类：

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

Answer 4

您可以使用 jQuery 的 :not 选择器。看看这段代码，尤其是这个sn-p

.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>