動態添加刪除字體真棒在跨度？

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>