使用 .not() 方法禁用悬停事件答案

【问题标题】：Disabling hover event with the .not() method使用 .not() 方法禁用悬停事件
【发布时间】：2013-05-21 10:25:39
【问题描述】：

我有以下代码，但我无法弄清楚为什么会触发 hoverIntent 事件，尽管我在点击时将 selected-food 类分配给了 li 元素。

这是一个 jsfiddle：http://jsfiddle.net/7uPcc/2/

预期行为：单击列表项时，会为其分配 selected-food 类（工作正常），并且在悬停时不显示包含成分的隐藏 div。我正在尝试使用.not() 方法来实现这一点。

实际行为：隐藏的 div 在悬停时显示，尽管悬停的项目分配了 selected-food 类。

HTML

<ul>
    <li class="food-name">Food 1
        <div class="food-ingredients">
            <ul>
                <li>Ingredient 1</li>
                <li>Ingredient 2</li>
                <li>Ingredient 3</li>
            </ul>
        </div>                    
    </li>
    <li class="food-name">Food 2
        <div class="food-ingredients">
            <ul>
                <li>Ingredient 1</li>
                <li>Ingredient 2</li>
                <li>Ingredient 3</li>
            </ul>
        </div>
    </li>
</ul>

CSS

.food-ingredients {
    display: none;
}

.selected-food {
    color: red;
}

Javascript

$('.food-name').not('.selected-food').hoverIntent({
    over: function() {
        $(this).children('.food-ingredients').show();
    }, 
    out: function() {
        $(this).children('.food-ingredients').hide();
    },
    timeout: 300
});

$('.food-name').click(function() {
    $(this).toggleClass('selected-food');
});

当我在控制台中测试 $('.food-name').not('.selected-food') 选择器时，我得到了预期的结果（即未返回具有 selected-food 类的列表项）

【问题讨论】：

标签： jquery hoverintent

【解决方案1】：

hoverIntent 事件绑定到页面加载时的元素。当时没有元素具有“selected-food”类，因此它们都会触发 hoverIntent 事件，即使您稍后将“selected-food”类添加到它们。

这是一个工作示例：

$('.food-name').hoverIntent({
    over: function() {
        if (!$(this).hasClass('selected-food')) {
            $(this).children('.food-ingredients').show();
        }
    }, 
    out: function() {
        $(this).children('.food-ingredients').hide();
    },
    timeout: 300
});

$('.food-name').click(function() {
    $(this).toggleClass('selected-food');
});

jsfiddle 链接：http://jsfiddle.net/7uPcc/8/

【讨论】：

谢谢，很多很棒的答案，但这是我认为最干净的解决方案，并且完全符合我的要求。

【解决方案2】：

在添加类之前分配事件处理程序。稍后更改类名将对此没有影响。

此脚本将在事件触发时检查该类是否存在...

$('.food-name').hoverIntent({
    over: function() {
        if ($(this).hasClass("selected-food")) return;
        $(this).children('.food-ingredients').show();
    }, 
    out: function() {
        if ($(this).hasClass("selected-food")) return;
        $(this).children('.food-ingredients').hide();
    },
    timeout: 300
});

$('.food-name').click(function() {
    $(this).toggleClass('selected-food');
});

这是您的小提琴示例的更新...

http://jsfiddle.net/7uPcc/11/

【讨论】：

我明白了。我认为每次将项目悬停时都会评估 hoverIntent 的选择器。您发布的代码并不完全是我想要做的，因为尽管已单击该项目，但我仍想隐藏 div。但我会从这里开始弄清楚。谢谢！

【解决方案3】：

在你的函数中使用条件：

    $('.food-name').hoverIntent({
        over: function() {
            if(!$(this).hasClass('selected-food')){
                $(this).children('.food-ingredients').show();
            }
        }, 
        out: function() {
            if(!$(this).hasClass('selected-food')){
                $(this).children('.food-ingredients').hide();
            }
        },
        timeout: 300
    });

【讨论】：

【解决方案4】：

我想这就是你要找的东西：

$('.food-name').hoverIntent({
    over: function() {
        if (!$(this).hasClass('selected-food')) { 
          $(this).children('.food-ingredients').show();
        }
    }, 
    out: function() {
        $(this).children('.food-ingredients').hide();
    },
    timeout: 300
});

$('.food-name').click(function() {
    $(this).toggleClass('selected-food').children('div')
           .toggle(!$(this).hasClass('selected-food'));
});

鼠标悬停时，仅当当前项目没有 selected-food 类时才显示 food-ingredients。

在您的点击处理程序中，根据您是否刚刚向其添加 selected-food 类来切换 food-ingredients 的可见性。

Here's a fiddle

【讨论】：

【解决方案5】：

因为事件在运行代码时绑定到匹配的元素集（$('.food-name').not('.selected-food').hoverIntent）。当您移除该类时，该元素仍会获得触发器。

在悬停函数中添加 if 条件或使用 delegate

【讨论】：