Javascript 空输入的JS验证指示器

我需要它，以便在启用.edit:input时，.indicator接收addClass'animate'；仅当输入为空时

如果.edit:input被分解，则每个.indicator都会收到removeClass'animate'；然后消失了

我很接近了，但是在点击了两次.edit切换和一些添加和删除输入中的文本之后，.animate似乎在没有任何方向的情况下添加/删除自己。 $.edit-toggle.propchecked，true； $.edit:input.attrdisabled，true； $'.edit toggle'.在“更改”功能上{ var idInput=$this.data'input'； 变量inputEle=$'.+input； var指示器=inputEle.next； 如果$this.is:已选中{ inputEle.attrdisabled，true； }否则{ 如果inputEle.val=&&inputEle.prop'required'{ indicator.addClass'animate'； }否则{ 移除类'animate'； } inputEle.RemoveAttrIsabled； } } ; $.edit:input.on'keyup'，函数{ var$this=$this； 变量$indicator=$'.indicator'，$this.parent； 如果$this.val=&&$this.prop'required'{ $indicator.addClass'animate'； }否则{ $indicator.removeClass'animate'； } } ; .编辑图标i{ 颜色：白色； 填充：10px； 边界半径：50%； } .编辑图标输入[类型=复选框]， .编辑图标。已选中{ 显示：无； 背景：蓝色； } .编辑图标输入[类型=复选框]， .编辑图标。未选中{ 背景：绿色； -webkit动画：向前反弹0.5s； 动画：向前反弹0.5秒； } .编辑图标输入[类型=复选框]：选中~.选中{ 显示：内联块； -webkit动画：向前反弹0.5s； 动画：向前反弹0.5秒； } .编辑图标输入[类型=复选框]：选中~未选中{ 显示：无； } .街区{ 显示器：flex； 对齐项目：居中； } .指标{ 变换：scale0； 转换：转换250ms； 高度：10px； 宽度：10px； 边界半径：50%； 背景色：红色； } .指示器{ 变换：scale1； } @-webkit关键帧反弹{ 0%, 20%, 50%, 80%, 100% { -webkit转换：scale1； 变换：scale1； } 40% { -webkit转换：scale1.3； 转换：scale1.3； } 60% { -webkit转换：scale1.1； 转换：scale1.1； } } @关键帧反弹{ 0%, 20%, 50%, 80%, 100% { -webkit转换：scale1； 变换：scale1； } 40% { -webkit转换：scale1.3； 转换：scale1.3； } 60% { -webkit转换：scale1.1； 转换：scale1.1； } } 因为输入和.indicator是列表，所以需要使用.each来访问数组中的所有元素

$.edit-toggle.propchecked，true； $.edit:input.attrdisabled，true； $'.edit toggle'.在“更改”功能上{ var idInput=$this.data'input'； 变量inputEle=$'.+input； var-toggleInput=$this； inputEle.eachfunction{ var indicator=$this.next； if toggleInput.is:已选中{ $this.attrdisabled，true； }否则{ 如果$this.val=&&$this.prop'required'{ indicator.addClass'animate'； }否则{ 移除类'animate'； } $this.removeAttrIsabled； } } } ; $.edit:input.on'keyup'，函数{ var$this=$this； 变量$indicator=$'.indicator'，$this.parent； 如果$this.val=&&$this.prop'required'{ $indicator.addClass'animate'； }否则{ $indicator.removeClass'animate'； } } ; .编辑图标i{ 颜色：白色； 填充：10px； 边界半径：50%； } .编辑图标输入[类型=复选框]， .编辑图标。已选中{ 显示：无； 背景：蓝色； } .编辑图标输入[类型=复选框]， .编辑图标。未选中{ 背景：绿色； -webkit动画：向前反弹0.5s； 动画：向前反弹0.5秒； } .编辑图标输入[类型=复选框]：选中~.选中{ 显示：内联块； -webkit动画：向前反弹0.5s； 动画：向前反弹0.5秒； } .编辑图标输入[类型=复选框]：选中~未选中{ 显示：无； } .街区{ 显示器：flex； 对齐项目：居中； } .指标{ 变换：scale0； 转换：转换250ms； 高度：10px； 宽度：10px； 边界半径：50%； 背景色：红色； } .指示器{ 变换：scale1； } @-webkit关键帧反弹{ 0%, 20%, 50%, 80%, 100% { -webkit转换：scale1； 变换：scale1； } 40% { -webkit转换：scale1.3； 转换：scale1.3； } 60% { -webkit转换：scale1.1； 转换：scale1.1； } } @关键帧反弹{ 0%, 20%, 50%, 80%, 100% { -webkit转换：scale1； 变换：scale1； } 40% { -webkit转换：scale1.3； 转换：scale1.3； } 60% { -webkit转换：scale1.1； 转换：scale1.1； } }

---

您只检查第一个输入元素，这就是为什么所有输入元素都被禁用的原因。