jQuery 在 Anchor 上添加和删除类答案

【问题标题】：jQuery adding and removing classes on AnchorjQuery 在 Anchor 上添加和删除类
【发布时间】：2009-10-13 16:16:56
【问题描述】：

我不明白为什么我不能从一个类中删除一个类然后添加一个新类。我可以使用 .css(...) 更改它的 css，但使用 .removeClass 和 .addClass 似乎不起作用。

我在某些跨度上使用添加和删除类，效果很好。有人知道我在做什么错吗？非常感谢！

html

<ul id="menu">
  <li><span>&nbsp;</span><span><a href="#">Home</a></span></li>
  <li><span>&nbsp;</span><span><a href="#">Test</a></span></li>
  <li><span>&nbsp;</span><span><a href="#">Test</a></span></li>
  <li><span>&nbsp;</span><span><a href="#">LaLa</a></span></li>
  <li><span>&nbsp;</span><span><a href="#">Test</a></span></li>
  <li><span>&nbsp;</span><span><a href="#">Blah</a></span></li>
 </ul>

CSS

.menuText{

    text-decoration: none;
    color: red;

}

.menuTextA{
    text-decoration: none;
    color: #1A4588;
}

jquery

$('li', 'ul#menu').each(function() {

                $(this).mouseover(function() {

                    $('span', this).eq(0).removeClass('menuTabLeft'); // works
                    $('span', this).eq(1).removeClass('menuTabRight'); // works

                    $('span', this).eq(0).addClass('menuTabLeftA'); // works
                    $('span', this).eq(1).addClass('menuTabRightA'); // works

                    //$('a', this).eq(0).removeClass('menuText'); // doesnt work 
                    //$('a', this).eq(0).addClass('menuTextA'); // doesnt work

                    $('a', this).eq(0).css('color', '#1A4588'); // works
    });
 });

【问题讨论】：

如果我将代码复制并粘贴到测试页面中并取消注释注释部分，并删除 //works 行，它会按预期工作。所以问题不在于你的代码。
我猜你还有其他覆盖 .menuText / .menuTextA 的 CSS 规则
使用 .each(...) 不是多余的吗？您不能直接将鼠标悬停行为定义应用于初始选择器的结果 jQuery 集合吗？并不是说这应该有什么不同，但这只是可以清理并可能消除问题的东西。
@Peter 好电话，我刚刚改了。谢谢你的提示。 @Greg 这正是问题所在！

标签： jquery css

【解决方案1】：

为什么不直接使用 CSS 伪选择器？

.menuText:hover{
    text-decoration: none;
    color: #1A4588;
}

【讨论】：

【解决方案2】：

如何快速修复：

$("#menu li").each(function() {
    $(this).mouseover(function() {
        var elems = $("span", this);
        $(elems[0]).removeClass("menuTabLeft").addClass("menuTabLeftA");
        $(elems[1]).removeClass("menuTabRight").addClass("menuTabRightA");
        $('a', this).removeClass("menuText").addClass("menuTextA");
    });
});

但是为了更好的修复（不需要脚本）：

#menu a {
    text-decoration: none;
    color: red;
     font-size: 30px;
}

#menu a:hover{
    text-decoration: none;
    color: #1A4588;
     font-size: 60px;
}

【讨论】：