只有当容器没有特定的类时，jQuery才会选择子类

Question

我想把悬浮函数附加到div的子类上，但前提是这个div没有特定的类。为了说明我的意图-我希望鼠标进入任何“..column-按钮”元素时触发悬停函数，除非容器".disabled“中添加了”.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

您可以使用jQuery的:not选择器。看看这段代码，特别是这段代码。

.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

使用Not方法

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

Answer 3

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

但是，如果类将动态更改，则需要使用委托绑定，而不是常规事件绑定。

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

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

我不得不使用mouseenter和mouseleave，因为hover不是真正的事件，所以您不能在委派时绑定它。