我正在通过PHP和JS进行表单验证,并尝试更改图标颜色,如下所示:
点击提交按钮后,我发送"电子邮件"要在服务器中验证的数据。之后,客户端会收到验证的值 1 ,未验证的 0 。
如果输入有效,边框颜色也会变为绿色和图标颜色。 如果输入无效,边框颜色将变为红色,图标也会相同。
以下是代码:
<script>
$(document).ready(function(){
$('.red').css('color',"red");
$('.green').css('color',"green");
});
</script>
if(email==1){
$("#email").css("border","1px solid red");
$("#icon-email").removeClass("glyphicon glyphicon-asterisk");
$("#icon-email").addClass("glyphicon glyphicon-remove");
$("#icon-email").addClass("red");
}
else{
$("#email").css("border","1px solid green");
$("#icon-email").removeClass("glyphicon glyphicon-asterisk");
$("#icon-email").addClass("glyphicon glyphicon-ok");
$("#icon-email").addClass("green");
$("#email").val(cookie_email);
}
问题是我无法更改图标颜色,但我可以更改边框颜色。 我在课堂创作之前和之前尝试过jquery,但没有成功。 任何sugestions?
答案 0 :(得分:0)
您需要在CSS文件中定义red
和green
类:
.red { color: red; }
.green { color: green; }
答案 1 :(得分:0)
我已经解决了这个问题。 首先,我需要在添加类之前定义css。
.red { color: red; }
.green { color: green; }
if(email==1){
$("#email").css("border","1px solid red");
$("#icon-email").removeClass("glyphicon glyphicon-asterisk");
$("#icon-email").addClass("red");
$("#icon-email").addClass("glyphicon glyphicon-remove");
}
else{
$("#email").css("border","1px solid green");
$("#icon-email").removeClass("glyphicon glyphicon-asterisk");
$("#icon-email").addClass("green");
$("#icon-email").addClass("glyphicon glyphicon-ok");
$("#email").val(cookie_email);
}