jquery - 插入一个类到一个div和一行html

Question

我有这个代码:

<div class="form-group label-floating">
<label class="control-label">Name <small>(required)</small></label>
<input name="name" type="text" class="form-control">

<label for="name" generated="true" class="error"></label>

</div>

现在我想在这里插入一个.css类:

<div class="form-group label-floating HERE NEW CLASS">

现在基于那个可以是错误/成功的类，我想在输入行之后写一行html:

<span class="material-icons form-control-feedback">clear</span>

我想为表单中的每个字段都做这个。

如果出错应该是:

<div class="form-group label-floating **has-error**">
<label class="control-label">Name <small>(required)</small></label>
<input name="name" type="text" class="form-control">
**<span class="material-icons form-control-feedback">clear</span>**
<label for="name" generated="true" class="error"></label>
</div>

如果成功:

<div class="form-group label-floating **has-succes**">
<label class="control-label">Name <small>(required)</small></label>
<input name="name" type="text" class="form-control">
**<span class="material-icons form-control-feedback">done</span>**
<label for="name" generated="true" class="error"></label>
</div>

我这样做了:

errorPlacement: function(error, element) {
        $(element).parent('div').addClass('has-error');
        //$('.form-group').append('<span class="material-icons form-control-feedback">clear</span>'); // add the clear ico

     },
     success: function(element) {
        $(element).parent('div').addClass('has-success');
        //$('.form-group').append('<span class="material-icons form-control-feedback">done</span>'); // add done ico

     },

这是有效的，但是在纠正无效输入后仍然显示错误，如果我尝试放置错误/成功图标，它会显示多次。

此外，如果我尝试显示错误消息，错误/成功图标不会出现

Answer 1

使用 $('.form-group.label-floating').addClass("success"); 添加类。我想这就是你想要的，可以让你去做你想做的事

$(function(){

  $('#btn').click(function(){
    $('.material-icons.form-control-feedback').remove();
    if($('input[type="text"]').val() != '') {
      $('.form-group.label-floating').addClass("has-success");
      $('input[type="text"]').after('<span class="material-icons form-control-feedback">done</span>');
    }
    else {
       $('.form-group.label-floating').addClass("has-success");
      $('input[type="text"]').after('<span class="material-icons form-control-feedback">clear</span>');
    }
    if($('input[type="email"]').val() != '') {
      $('.form-group.label-floating').addClass("has-success");
      $('input[type="email"]').after('<span class="material-icons form-control-feedback">done</span>');
    }
    else {
       $('.form-group.label-floating').addClass("has-success");
      $('input[type="email"]').after('<span class="material-icons form-control-feedback">clear</span>');
    }
  })
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group label-floating">
<label class="control-label">Name <small>(required)</small></label>
<input name="name" type="text" class="form-control">

<label for="name" generated="true" class="error"></label>

</div>
<div class="form-group label-floating">
<label class="control-label">Email <small>(required)</small></label>
<input name="email" type="email" class="form-control">

<label for="email" generated="true" class="error"></label>

</div>

<button id="btn" >submit</button>