条件工作不正常不更改jQuery中条件的颜色

Question

我想为我的表单创建一个函数，如果任何字段是空的背景颜色变红，否则背景是绿色的，但是我的条件在运行函数后不能正常工作，所有字段都有相同的背景颜色，不能正确满足条件红色这里是我的代码所有字段显示红色背景颜色好心帮忙

$(document).ready(function(){
   $(".validate").each(function(i){
      var text = ($(this).val());
      alert(text);

      if(text === ''){
       $(".validate").css("backgroundColor","red");
       alert("Enter Value Here")
      }
      else
      {
       $(".validate").css("backgroundColor","green");
      }

HTML代码

 <table id="tblForm" style="width:55%;margin-left:20%;margin-top:2%;border:1px solid">
   <tr>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
   <td style="width:20%;border:1px solid;font-size:12px;font-weight:bold;"  >
      <asp:Label  runat="server" ID="lbl_TransactionId_St_M"  Text="Transaction Type:"></asp:Label>

   </td>
   <td style="margin-left:1%;border:1px solid;width:30%;font-size:12px;font-weight:bold;">
       <asp:DropDownList ID="cmbTransType" runat="server" style="width:100%;" CssClass="validate">
       <asp:ListItem Text="Select"></asp:ListItem>
       </asp:DropDownList>
   </td>
   <td style="margin-left:1%;border:1px solid;width:20%;font-size:12px;font-weight:bold;">
     <asp:Label runat="server" ID="lbl_OrderDate_DateTime_M"  Text="Order Date:"></asp:Label>
   </td>
   <td style="margin-left:1%;border:1px solid;width:30%;font-size:12px;font-weight:bold;">
       <asp:TextBox ID="txtOrderDate" runat="server" style="width:98%" CssClass="validate"></asp:TextBox>
   </td>
   </tr>
   <tr>
   <td style="width:20%;border:1px solid;font-size:12px;font-weight:bold;">
      <asp:Label runat="server" ID="lblDocumentType_St_O" CssClass="label" Text="Document Type:"></asp:Label>
   </td>
   <td style="margin-left:1%;border:1px solid;width:30%;font-size:12px;font-weight:bold;">
       <asp:DropDownList ID="cmbDocType" runat="server" style="width:100%;" CssClass="validate">
       <asp:ListItem Text="Select"></asp:ListItem>
       </asp:DropDownList>
   </td>
   <td style="margin-left:1%;border:1px solid;width:20%;font-size:12px;font-weight:bold;">
     <asp:Label runat="server" ID="lblPartyPO_Num_M"  Text="Party PO #:"></asp:Label>
   </td>
   <td style="margin-left:1%;border:1px solid;width:30%;font-size:12px;font-weight:bold;">
       <asp:TextBox ID="txtPONo" runat="server" style="width:98%" CssClass="validate"></asp:TextBox>
   </td>
   </tr>

Answer 1

你的代码有输入错误。使用以下命令：

$(document).ready(function(){
   $(".validate").each(function(i){
      var text = ($(this).val());
      alert(text);

      if(text === ''){
       $(".validate").css("backgroundColor","red");
       alert("Enter Value Here")
      }
      else
      {
       $(".validate").css("backgroundColor","green");
      }

Answer 2

设置背景色时，需要使用此，即当前元素上下文。

$(".validate").each(function (i) {
    var text = $(this).val();
    if (text === '') {
        $(this).css("backgroundColor", "red");
        alert("Enter Value Here")
    } else {
        $(this).css("backgroundColor", "green");
    }
});