0

我似乎无法解决这个问题：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', '');
            });
        };
    });

基本上我想要的是忽略悬停类的变化，如果元素已经有一个特定的类（在这种情况下；'选择'）。

我错过了什么？

4

3 回答 3

3

该代码有几个错误：

  • 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 技巧来解决它。

于 2013-08-06T08:27:33.380 回答
0

尝试

$(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', '');
        }
    });
});
于 2013-08-06T08:27:46.620 回答
0

$(this)在您的代码中“什么都没有”，请查看http://jsfiddle.net/pvyaL/2/

我也改变了这个：

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

所以检查是在 上<a>，而不是在<li>

于 2013-08-06T08:30:04.927 回答