Question

我无法弄清楚为什么我不能删除一个类然后添加一个新类。我可以使用.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
    });
 });

Answer 1

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

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

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

jQuery在Anchor上添加和删除类

2 个答案: