Jquery addClass（绿色）只工作一次

当结果数大于10时，我试图使整个div变为绿色，否则变为红色。当我输入两个使结果小于10的数字时，它是红色的，但当我更改为大于10时，它仍然是红色的。绿色仅在刷新页面后输入数字时有效

$（文档）.ready（startApp）；
函数startApp（）{
/*
向单击时调用下面函数的按钮添加单击处理程序
*/
函数doCalculation（）{
var number1=数字（$（'#number1'）.val（））；
var number2=数字（$（'#number2'）.val（））；
var结果=编号1+编号2；
如果（结果>10）{
$（'#display'）.addClass（'highText'）；
$（“#显示范围”）.text（结果）；
}否则{
$（'#display'）.addClass（'lowText'）；
$（“#显示范围”）.text（结果）；
}
}
$（'doIt'）。在（'click'，doccalculation'）；
}
/*
创建一个执行以下操作的函数：
从#number1和#number2获取数字
把数字加起来
将结果放入#display元素内的范围中
额外：
如果数字>10，则使整个#显示元素文本变为绿色
否则，使用上面的类将其设置为红色
*/

.highText{
颜色：绿色；
}
.lowText{
颜色：红色；
}

+
结果--
算算这是因为最终应用了两个类，最后应用了红色类，推翻了绿色类。解决方案首先使用
$（'#display'）删除所有类。removeClass（）
：


$（文档）.ready（startApp）；
函数startApp（）{
/*
向单击时调用下面函数的按钮添加单击处理程序
*/
函数doCalculation（）{
var number1=数字（$（'#number1'）.val（））；
var number2=数字（$（'#number2'）.val（））；
$（'#display'）.removeClass（）；
var结果=编号1+编号2；
如果（结果>10）{
$（'#display'）.addClass（'highText'）；
$（“#显示范围”）.text（结果）；
}否则{
$（'#display'）.addClass（'lowText'）；
$（“#显示范围”）.text（结果）；
}
}
$（'doIt'）。在（'click'，doccalculation'）；
}
/*
创建一个执行以下操作的函数：
从#number1和#number2获取数字
把数字加起来
将结果放入#display元素内的范围中
额外：
如果数字>10，则使整个#显示元素文本变为绿色
否则，使用上面的类将其设置为红色
*/
.highText{
颜色：绿色；
}
.lowText{
颜色：红色；
}

+
结果--
算算您没有删除以前添加的类不确定删除所有类的可取性，只需删除相关的类即可。@Barmar在本例中没有问题。但是如果用户需要担心，他们只需将
$（'#display'）.removeClass（）替换为
$（'#display'）.removeClass（'highText lowText'）
，但是如果下一个结果大于10，它不会在最后添加绿色类，这推翻了红色阶级before@WeilinHong在任何时候都不需要在div上同时使用这两个类。仅添加适用于removeClass（）的