Question

如果某个元素没有定义css类，我想阻止两个事件被一个元素监视（mouseenter和mouseleave是特定的）。

该系统的流程是

在准备好文档时，我将类.selected添加到＃menu_top_option_1元素
```
$("#menu_top_option_1").addClass("selected");
```

这两个事件有一个传感器

$("#menu_top_option_1").not(".selected").on({
    mouseenter: function(){
        $(this).addClass("highlighted");
    },
    mouseleave: function(){
        $(this).removeClass("highlighted");
    }
});

当有点击事件时，我将类.selected添加到＃menu_top_option_1元素。

$("#menu_top_option_1").click(function () {
    $("#menu_top_arrow_img").animate({left: position_menu_top_option_1+'px'}, 500);
    $(this).removeClass("highlighted");
    $("#option_wrapper div.option").removeClass("selected");
    $(this).addClass("selected");
});

问题：这不能按预期工作。这些元素仍然具有与分配.selected之前相同的悬停事件，即使在添加.selected后也是如此。除了＃menu_top_option_1元素之外，因为我怀疑它确实在文档就绪时添加了该类。

有什么建议吗？

Answer 1

您应该将事件处理程序绑定到所有元素，然后在该事件处理程序内部，检查被单击的当前元素是否具有selected类：

$(function () {
    //bind a click event handler to all of the menu items that:
    //1. removes the `selected` class from the element that currently has it
    //2. applies that class to the element clicked
    //3. removes the `highlighted` class from the current element since it will have it, due to the fact that you have to hover over an element to click it
    $('#option_wrapper').children().on('click', function () {
        $(this).siblings('.selected').removeClass('selected').end().removeClass('highlighted').addClass('selected');

    //bind a mouseenter event handler to the menu items that updates the currently moused-over element only if it doesn't have the `selected` class
    }).on('mouseenter', function () {

        //notice the `!` here, so we are checking for the non-existence of the class in question
        if (!$(this).hasClass('selected')) {
            $(this).addClass('highlighted');
        }

    //bind a mouseleave event handler to the menu items that removes the `highlighted` class
    }).on('mouseleave', function () {
        $(this).removeClass('highlighted');
    });
});

以下是演示：http://jsfiddle.net/g8W4z/

一些文档：

.hasClass()：http://api.jquery.com/hasclass
.siblings()：http://api.jquery.com/siblings

Answer 2

我认为问题源于您在文档就绪时附加事件侦听器这一事实。一旦它们被连接，你永远不会删除它们。因此，菜单选项的行为与页面加载时完全相同。

Jquery与.not和.on的行为不符合预期

2 个答案: