Question

我似乎无法理解这一点：http://jsfiddle.net/pvyaL/

    $(function () {
        if (!$(this).hasClass('selected')) {
            $('.navigation li').hover(function () {
                $(this).find('a').attr('class', 'hovering');
            },
            function () {
                $(this).find('a').attr('class', '');
            });
        };
    });

基本上我想要的是忽略悬停类更改，如果元素已经有一个特定的类（在这种情况下;'selected'）。

我错过了什么？

Answer 1

该代码有几个错误：

this指的是文档，而不是任何li元素。
使用.attr设置课程是一个非常糟糕的选择 - addClass，removeClass和toggleClass完全存在于此目的。
你甚至不需要jQuery，因为它可以用纯CSS完成。

在jQuery表单中，你想要的更像是

$('.navigation li:not(.selected)').hover(
function () {
    $(this).find('a').addClass('hovering');
},
function () {
    $(this).find('a').removeClass('hovering');
});

如果您想让脚本动态响应selected类中的更改，则另一个版本将成为解决方案：

$('.navigation li').hover(
function () {
    if(!$(this).hasClass('selected')) $(this).find('a').addClass('hovering');
},
function () {
    if(!$(this).hasClass('selected')) $(this).find('a').removeClass('hovering');
});

当然没有理由用jQuery做到这一点;纯CSS就足够了：

.navigation li:not(.selected):hover a {
    /* your styles go here */
}

IE8不支持:not选择器，但如果这是一个问题，您可以使用set/revoke trick处理它。

Answer 2

尝试

$(function() {
    $('.navigation').on('mouseenter', 'li:not(.selected)', function() {
        $(this).find('a').attr('class', 'hovering');
    }).on('mouseleave', 'li:not(.selected)', function() {
        $(this).find('a').attr('class', '');
    })
});

或

$(function() {
    $('.navigation li').hover(function() {
        if (!$(this).hasClass('selected')) {
            $(this).find('a').attr('class', 'hovering');
        }
    }, function() {
        if (!$(this).hasClass('selected')) {
            $(this).find('a').attr('class', '');
        }
    });
});

Answer 3

$(this)代码中没有任何内容，请查看http://jsfiddle.net/pvyaL/2/

我也改变了这个：

if (!$(this).find('a').hasClass('selected')) {

因此，检查位于<a>，而不是<li>

无法让hasClass在条件下正常工作

3 个答案: