2

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不返回具有类的列表项）

4

5 回答 5

2

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/

于 2013-05-21T10:42:41.803 回答
1

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

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

$('.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/

于 2013-05-21T10:35:37.803 回答
1

在函数中使用条件：

    $('.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
    });
于 2013-05-21T10:36:59.353 回答
1

我想这就是你要找的：

$('.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在当前项目没有 class 时显示selected-food。

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

这是一个小提琴

于 2013-05-21T10:41:56.580 回答
0

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

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

于 2013-05-21T10:31:30.687 回答