jquery - 捕获 DOM 元素的事件，除了具有特定类的事件

Question

我有一组选项卡，想为mouseover它们添加功能。我不希望将此功能应用于.active.

标记：

<ul>
    <div class='tab'>my tab</div>
    <div class='tab' data-id='1'>your tab</div>
</ul>

<script>
  $('.tab').on('click',function(){
     $(this).addClass('active');
  });
</script>

我试过这个：

$('.tab').not('.active').on('mouseover', function(){

和

$('.tab:not(.active)').on('mouseover', function(){

但这些都不起作用。我如何从该功能中排除该活动？

Answer 1

一个可能的问题是我通过 addClass 添加活动以响应在另一部分中的单击。上面的语法会处理这个吗？

这就是问题所在。在加载时添加mouseover事件时，活动类不存在，因此.not()不排除任何内容。相反，您需要检查处理程序本身内部的类。

试试这个：

$('.tab').on('mouseover', function() {
    if (!$(this).hasClass("active")) {
        // your code here
        $(this).css("background-color", "#C00");
    }
});

$(".tab:last").addClass("active");

示例小提琴