jQuery之后addClass / removeClass没有变化吗？

Question

这是一个测试： http : //jsfiddle.net/7jceH/

我使用一个Link，它将div的类从.testOn更改为.testOff（可以正常使用），并且鼠标悬停操作应该将testOn的字体颜色更改为黄色（也可以使用），并将testOff的字体颜色更改为红色。 但单击并在类Change之后不会改变。

//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");
 });

更新小提琴

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/