我有通过代码动态生成的html,它在浏览器中呈现为:
<div class="required">
<label class="col-sm-3 control-label text-danger">Contact Details</label>
<div id="dynamic-contact-details" class="col-sm-4">
<div id="count0" class="space form-group has-error"><div class="col-sm-4">
<select id="contact-type0" class="form-control"><option value="">Select</option><option value="Phone">Phone</option><option value="Whatapp">Whatapp</option><option value="Facebook">Facebook</option><option value="Web">Web</option><option value="Fax">Fax</option></select>
<small id="contact-type0" class="text-danger">Contact Type is Required</small>
</div>
<div class="col-sm-7">
<input type="text" name="contact-type-value0" id="contact-type-value0" class="form-control">
<small id="contact-type-value0" class="text-danger">Contact Type Value is Required</small>
</div>
<button value="count0" class="remove_field btn btn-danger"><i class="fa fa-trash"></i></button>
</div>
<div id="count1" class="space form-group has-error"><div class="error">
<div class="col-sm-4">
<select id="contact-type1" class="form-control"><option value="">Select</option><option value="Phone">Phone</option><option value="Whatapp">Whatapp</option><option value="Facebook">Facebook</option><option value="Web">Web</option><option value="Fax">Fax</option></select>
<small id="contact-type1" class="text-danger">Contact Type is Required</small>
</div><div class="col-sm-7">
<input type="text" name="contact-type-value1" id="contact-type-value1" class="form-control">
<small id="contact-type-value1" class="text-danger">Contact Type Value is Required</small>
</div>
<button value="count1" class="remove_field btn btn-danger"><i class="fa fa-trash"></i></button>
</div></div>
<div id="count2" class="space form-group has-error"><div
....
</div>
</div>
</div>
请注意,has-error
当相应的输入保持空白并单击保存按钮时,该类将追加到div。has-error
填充输入后,将从div中删除这些类。现在我想删除类text-danger
从标签只有当所有的DIV中dynamic-contact-details
也不会含有 has-error
类。
我已经尝试了下面的代码行,但是它不起作用。
$('#dynamic-contact-details').on('change', ':input', function() {
$(this).closest(".form-group").removeClass("has-error");
$(this).next('small').addClass('hide');
if($(this).find('div.has-error').length == 0)
{
$(this).closest(".form-group").parent().parent().find(".control-label").removeClass("text-danger");
}
});
请帮助我找到更好的方法。
您需要检查has-error
具有id
as的元素内的类的长度,dynamic-contact-details
因此您需要更改if
条件,如下所示:
$('#dynamic-contact-details').on('change', ':input', function() {
$(this).closest(".form-group").removeClass("has-error");
$(this).next('small').addClass('hide');
if($('#dynamic-contact-details').find('.has-error').length == 0)
{
$(this).closest(".form-group").parent().parent().find(".control-label").removeClass("text-danger");
}
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句