Javascript Jquery之后addClass/removeClass没有变化吗？

下面是一个测试：

我使用了一个链接，将div的类从.testOn更改为.testOff（工作非常完美），鼠标悬停操作应该将testOn中的字体颜色改为黄色（也很好），并将testOff中的字体颜色改为红色。但它不会随着单击和类更改而更改

//Test Link to change classes 
$(".testLink").click(function (e) {
   $("#test").removeClass("testOn").addClass("testOff");
});

// MouseOver testOn turns Font Color to yellow
$( ".testOn" ).mouseover(function(){
   $("#test").css('color', '#ecbf5d');
}).mouseout(function(){
  $("#test").css('color', '#000');
});

//MouseOver testOff turns Font Color to red
$( ".testOff" ).mouseover(function(){
   $("#test").css('color', '#cd0000');
}).mouseout(function(){
   $("#test").css('color', '#000');
});

试试这个

$(".testLink").click(function (e) {
     $("#test").removeAttr('style')
     $("#test").removeClass("testOn").addClass("testOff");
 });

---

您将希望在上使用jQuery，如下所示：

$(document).on("mouseover", ".testOff",function(){
   $("#test").css('color', '#cd0000');
}).on("mouseout", ".testOff",function(){
   $("#test").css('color', '#000');
});