课程添加后注入CSS

时间:2015-02-25 17:38:27

标签: jquery css

我正在通过PHP和JS进行表单验证,并尝试更改图标颜色,如下所示:

example

点击提交按钮后,我发送"电子邮件"要在服务器中验证的数据。之后,客户端会收到验证的值 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?

2 个答案:

答案 0 :(得分:0)

您需要在CSS文件中定义redgreen类:

.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);
}