Question

我有以下代码，虽然我在点击时将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类的列表项）

Answer 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/

Answer 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/

Answer 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
    });

Answer 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'));
});

悬停在上方时，如果当前项目没有班级food-ingredients，则仅显示selected-food。

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

Here's a fiddle

Answer 5

因为事件在运行代码（$('.food-name').not('.selected-food').hoverIntent）时绑定到匹配元素集。删除类时，元素仍然触发。

在悬停功能中添加if条件或使用delegate

使用.not（）方法禁用悬停事件

5 个答案:

Here's a fiddle