Question

Okai，所以我有这个Ajax表单成功返回数据并将其回显到#register_msg。

但是我也希望设置输入表单的样式，这是我的Ajax代码，然后是我的表单。由于某种原因，它没有样式的形式。怎么样？

if(html.indexOf("Verification mail sent") > -1){
    $("#register-wrap").html(html);
}
// FILL OUT FORMS
else if(html.indexOf("You need to fill out all forms.") > -1){
    $("#register_msg").html(html);
    $("#reg_fullname").css("-webkit-box-shadow: 0px 0px 14px 1px #FF0000; -moz-box-shadow: 0px 0px 14px 1px #FF0000; box-shadow: 0px 0px 14px 1px #FF0000;");
    $("#reg_email").css("-webkit-box-shadow: 0px 0px 14px 1px #FF0000; -moz-box-shadow: 0px 0px 14px 1px #FF0000; box-shadow: 0px 0px 14px 1px #FF0000;");
    $("#reg_password1").css("-webkit-box-shadow: 0px 0px 14px 1px #FF0000; -moz-box-shadow: 0px 0px 14px 1px #FF0000; box-shadow: 0px 0px 14px 1px #FF0000;");
    $("#reg_password2").css("-webkit-box-shadow: 0px 0px 14px 1px #FF0000; -moz-box-shadow: 0px 0px 14px 1px #FF0000; box-shadow: 0px 0px 14px 1px #FF0000;");
    $("#reg_register").val('<?php echo $database_reg_f_2; ?>');
}

HTML表单

<h1>Register</h1><br>
<div id="register_msg"></div>
<form method="POST"><br>
    <input type="text" name="fullname" id="reg_fullname" /><br>
    Email<br>
    <input type="text" name="email" id="reg_email" /><br>
    Password<br>
    <input type="password" name="password1" id="reg_password1" /><br>
    Repeat Password<br>
    <input type="password" name="password2" id="reg_password2" /><br>
    <input type="submit" name="register" value="register" id="reg_register" />
</form>

Answer 1

问题是jQuery中的css命令。正确的方法是这样的：

  $("#reg_fullname").css({
      "-webkit-box-shadow": "0px 0px 14px 1px #FF0000",
      "-moz-box-shadow": "0px 0px 14px 1px #FF0000",
      "box-shadow": "0px 0px 14px 1px #FF0000"
  });

查看工作示例CODEPEN

Answer 2

为了保持可管理和清洁，您应该尽可能地分离HTML，CSS和脚本。另外要记住的是，在将任何代码放在一起时，坚持DRY（不要重复自己）的原则。

处理代码的更好方法是

<强>脚本

if(html.indexOf("Verification mail sent") > -1){
    $("#register-wrap").html(html);
}
// FILL OUT FORMS
else if(html.indexOf("You need to fill out all forms.") > -1){
    $("#register_msg").html(html);
    $("#reg_register").val('<?php echo $database_reg_f_2; ?>');
}

CSS （在单独的文件或<style></style>标签中）

.myclass {
    -webkit-box-shadow: 0px 0px 14px 1px #FF0000;
    -moz-box-shadow: 0px 0px 14px 1px #FF0000;
    box-shadow: 0px 0px 14px 1px #FF0000;
}

<强> HTML

<h1>Register</h1><br>
<div id="register_msg"></div>
<form method="POST"><br>
    <input type="text" name="fullname" id="reg_fullname" class="myclass" /><br>
    Email<br>
    <input type="text" name="email" id="reg_email" class="myclass" /><br>
    Password<br>
    <input type="password" name="password1" id="reg_password1" class="myclass" /><br>
    Repeat Password<br>
    <input type="password" name="password2" id="reg_password2" class="myclass" /><br>
    <input type="submit" name="register" value="register" id="reg_register" class="myclass" />
</form>

无法通过Ajax应用CSS来形成输入

2 个答案: