在Jquery之后addClass / removeClass没有变化？

Question

以下是测试：http://jsfiddle.net/7jceH/

我使用一个链接，将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');
});

Answer 1

试试这个。

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

Updated Fiddle

Answer 2

您将要使用jQuery，如下所示：

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

https://api.jquery.com/on/