无法通过 Ajax 将 CSS 应用于表单输入 - Can't apply CSS to form input through Ajax

Can't apply CSS to form input through Ajax

本文关键字：CSS 应用于表单输入 Ajax | 更新日期: 2023-09-27

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; ?>');
}

网页表单

<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>

问题是你在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

为了保持事物的可管理和干净，您应该尽可能多地将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>