动态添加删除字体真棒在跨度？

Question

我想基于用户是否将任何数据输入到输入中来动态添加字体awsome。正如你所看到的，如果用户没有输入任何我想显示'x'字体的真棒，并且在用户完成输入时我想显示'检查'字体真棒。我尝试追加和其他方式，似乎没有工作。作为

我用KEYUP所以它动态地改变，如果用户删除一些文本后

jQuery(document).ready(function() { 
 
    
 
    $('.pm-text_field').keyup(function() { 
 

 
     var empty = false; 
 
     $('.pm-text_field').each(function() { 
 
      if ($(this).val().length == 0) { 
 
       empty = true; 
 
      } 
 
     }); 
 

 
     if (empty) { 
 
      $("#pm-checkbox").html('<i class="fa fa-check"></i>'); 
 
     } else { 
 
      $('#pm-checkbox').html('<i class="fa fa-times"></i>'); 
 
     } 
 
    }); 
 
    
 
    });

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-sm-6"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <input class="pm-text_field" name="" placeholder="Practice Name" type="text" required> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <input class="pm-text_field" name="" placeholder="TAX ID #" type="text" required> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
    
 
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active ui-corner-top" 
 
\t \t \t \t \t \t role="tab" id="ui-accordion-accordion-header-0" aria-controls="ui-accordion-accordion-panel-0" aria-selected="true" 
 
\t \t \t \t \t \t tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span><a href="#">1. Practice Membership applications</a><span id="pm-checkbox" class="pull-right pm-tickmark"></span></h3>

Answer 1

您已经扭转的图标！他们应该是这样的：

if (empty) { 
    $("#pm-checkbox").html('<i class="fa fa-times"></i>'); 
} else { 
    $('#pm-checkbox').html('<i class="fa fa-check"></i>'); 
} 

jQuery(document).ready(function() { 
 
    
 
    $('.pm-text_field').keyup(function() { 
 

 
     var empty = false; 
 
     $('.pm-text_field').each(function() { 
 
      if ($(this).val().length == 0) { 
 
       empty = true; 
 
      } 
 
     }); 
 

 
     if (empty) { 
 
      $("#pm-checkbox").html('<i class="fa fa-times"></i>'); 
 
     } else { 
 
      $('#pm-checkbox').html('<i class="fa fa-check"></i>'); 
 
     } 
 
    }); 
 
    
 
    });

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-sm-6"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <input class="pm-text_field" name="" placeholder="Practice Name" type="text" required> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <input class="pm-text_field" name="" placeholder="TAX ID #" type="text" required> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
    
 
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active ui-corner-top" 
 
\t \t \t \t \t \t role="tab" id="ui-accordion-accordion-header-0" aria-controls="ui-accordion-accordion-panel-0" aria-selected="true" 
 
\t \t \t \t \t \t tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span><a href="#">1. Practice Membership applications</a><span id="pm-checkbox" class="pull-right pm-tickmark"></span></h3>

Answer 2

$('.pm-text_field').keyup(function(){ 
 
    var empty=false; 
 
    $('.pm-text_field').each(function(){ 
 
    empty = $(this).val().length<=0?false:true; 
 
    if(!empty) 
 
     return false; 
 
    }); 
 
    empty?$('.InputSec').next().html('<i class="fa fa-check"></i>'):$('.InputSec').next().html('<i class="fa fa-close"></i>'); 
 
});

.InputSec{width:180px;float:left} 
 
.InputSec + div{ 
 
    width:50px; 
 
    float:left; 
 
    font-size:35px; 
 
    height:30px;} 
 
.fa.fa-close{color:pink;} 
 
.fa.fa-check{color:lightgreen;}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="InputSec"> 
 
    <input class="pm-text_field" placeholder="Practice Name" type="text" ><br> 
 
    <input class="pm-text_field" placeholder="TAX ID #" type="text" ><br> 
 
</div> 
 
<div><i class="fa fa-close"></i></div>