Question

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

我使用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">
													<input class="pm-text_field" name="" placeholder="Practice Name" type="text" required>
												</div>
												<div class="col-sm-6">
													<input class="pm-text_field" name="" placeholder="TAX ID #" type="text" required>
												</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"
						 role="tab" id="ui-accordion-accordion-header-0" aria-controls="ui-accordion-accordion-panel-0" aria-selected="true"
						 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

＆＃13;

$('.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>'); 
});

＆＃13;

.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;}

＆＃13;

<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>

＆＃13;

Answer 2

你已经扭转了图标！它们应该是这样的：

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

＆＃13;

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>');
        }
    });
    
    });

＆＃13;

<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">
													<input class="pm-text_field" name="" placeholder="Practice Name" type="text" required>
												</div>
												<div class="col-sm-6">
													<input class="pm-text_field" name="" placeholder="TAX ID #" type="text" required>
												</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"
						 role="tab" id="ui-accordion-accordion-header-0" aria-controls="ui-accordion-accordion-panel-0" aria-selected="true"
						 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>

＆＃13;

动态添加删除字体真棒到span？

2 个答案: