Javascript 错误标签仅显示一次事件所有输入为空

我试图创建一个带有条件的表单，当每个

输入中的一个
或全部为空时，它将在
标签上创建
span

HTML:

<form action="" method="post" role="form" accept-charset="utf-8" class="testform" >
      <legend>test</legend>
      <div class="form-group">
        <label for="username">username :</label>
        <input type="text" id="username" class="form-control m-20">
      </div>
      <div class="form-group">
        <label for="password">password :</label>
        <input type="password" id="password" class="form-control m-20">
      </div>
      <div class="form-group">
        <label for="repassword">re-type password :</label>
        <input type="password" id="repassword" class="form-control m-20">
      </div>
      <div class="form-group">
        <label for="email">Email :</label>
        <input type="Email" id="email" class="form-control m-20">
      </div>                        
      <button id="send" class="btn btn-primary">
        submit
      </button>
 </form>

// button submit got clicked
$('#send').on("click", function(){ 
    var input= $('.testform input');
    var empty= $("<span class=\"error\">empty</span>");
    // check input if have value if empty
    input.each(function() {
        var self=this;
        var value=$(this).val();
        // if empty change color of label
        if(value ==""){
            // $(self).parent(".form-group").find("label").prepend(empty);
            $(self).parent(".form-group").find("label").css({"background": "green"});
        }else{
            $(self).parent(".form-group").find("label").css({"background": "white"});
        }
    });
    return false;
});


测试
用户名：
密码：
重新键入密码：
电邮：
提交

关于js代码。如果输入是空的，我会尝试通过将标签的背景更改为绿色来进行检查

然后我尝试用prepend创建标签上的跨度。但当我运行它时，只有标签电子邮件得到了span。如果我只填写电子邮件。只有repassword的标签得到了span。当我只使用代码更改背景时，我没有发现这一点

任何人都能找到问题所在。谢谢

JS:

<form action="" method="post" role="form" accept-charset="utf-8" class="testform" >
      <legend>test</legend>
      <div class="form-group">
        <label for="username">username :</label>
        <input type="text" id="username" class="form-control m-20">
      </div>
      <div class="form-group">
        <label for="password">password :</label>
        <input type="password" id="password" class="form-control m-20">
      </div>
      <div class="form-group">
        <label for="repassword">re-type password :</label>
        <input type="password" id="repassword" class="form-control m-20">
      </div>
      <div class="form-group">
        <label for="email">Email :</label>
        <input type="Email" id="email" class="form-control m-20">
      </div>                        
      <button id="send" class="btn btn-primary">
        submit
      </button>
 </form>

// button submit got clicked
$('#send').on("click", function(){ 
    var input= $('.testform input');
    var empty= $("<span class=\"error\">empty</span>");
    // check input if have value if empty
    input.each(function() {
        var self=this;
        var value=$(this).val();
        // if empty change color of label
        if(value ==""){
            // $(self).parent(".form-group").find("label").prepend(empty);
            $(self).parent(".form-group").find("label").css({"background": "green"});
        }else{
            $(self).parent(".form-group").find("label").css({"background": "white"});
        }
    });
    return false;
});

//已单击提交按钮
$（'#send'）。在（“单击”，函数（）{
var输入=$（'.testform输入'）；
var empty=$（“empty”）；
//如果输入值为空，则检查输入
input.each（函数（）{
var self=这个；
var值=$（this.val（）；
//如果为空，请更改标签的颜色
如果（值==“”）{
//$（self）.parent（“.form group”）.find（“label”）.prepend（空）；
$（self.parent（“.formgroup”）.find（“label”）.css（{“background”：“green”}）；
}否则{
$（self.parent（“.formgroup”）.find（“label”）.css（{“background”：“white”}）；
}
});
返回false；
});
发生这种情况是因为您试图将同一个元素
empty
分配给所有输入，而这是不可能的，因此它将只分配给最后一个输入，因此您应该
在每次分配
empty
元素时克隆它：

$(this).parent(".form-group").find("label").prepend(empty.clone(true));

希望这有帮助


$（'#send'）。单击（“click”，函数（事件）{
event.preventDefault（）；
$（'.error'）.remove（）；
var$inputs=$（'.testforminput'）；
var empty=‘empty’；
$inputs.each（函数（）{
var$this=$（this）；
var值=$（this.val（）；
如果（值==“”）{
$this.parent（“.form group”）.find（“label”）.prepend（空）；
$this.parent（“.formgroup”）.find（“label”）.css（{“background”：“green”}）；
}否则{
$this.parent（“.formgroup”）.find（“label”）.css（{“background”：“white”}）；
}
});
返回false；
});

测试
用户名：
密码：
重新键入密码：
电邮：
提交
您也可以简单地将其设置为
var empty='empty'并避免克隆+1我看到您从
$（self）.parent
更改为
$（this）.parent
，这是否也会造成问题？感谢@bleeted0d您的干预/建议。@vandi实际上，我会像
var$this=$（this）一样缓存
此
因为它清楚地表明它是一个jQuery对象。查看更多的个人预引用，尽管确保它能正常工作，但您正在多次重新创建jQuery对象。显然，这一小段代码对性能的影响微乎其微，但我要说的是，总是缓存您将多次使用的jQuery对象是一种很好的做法，事实上，如果我不缓存多次使用的对象，我的IDE（PHPStorm）实际上会对我大喊大叫。