javascript - 如何根据输入值更改图标？

Question

我想根据输入值更改图标。如果输入有值，那么我想显示 fa-check 图标。如果输入没有值，那么我想显示 fa-arrow-right。

我对模糊或按键有点困惑；我应该使用哪一个呢？如果还有其他选择，请分享。

$('.provide-input').keypress(function() {
    if ($(this).val().length === 0) {
        $('.fa-arrow-right').hide();
        $('.fa-check').show();
    } else {
        $('.fa-check').hide();
        $('.fa-arrow-right').show();
    }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

<div class="form-group">
    <i class="fa fa-arrow-right provide-icon"></i>
    <i class="fa fa-check provide-icon"></i> 
    <input type="text" class="provide-input" /> 
      this is treatment field
</div>

Answer 1

尝试使用带有事件委托(delegate) (on) 方法的 input 事件。这种方法的优点是 - 该事件也适用于动态创建的元素(具有该类)。我还会建议您在获取长度之前trim()该值。

由于初始值为空，因此您可以最初隐藏箭头。

$('.fa-arrow-right').hide();
$(document).on('input', '.provide-input', function () {
  if ($(this).val().trim().length === 0) {
    $('.fa-arrow-right').hide();
    $('.fa-check').show();
  }
  else {
    $('.fa-check').hide();
    $('.fa-arrow-right').show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

<div class="form-group">
  <i class="fa fa-arrow-right provide-icon"></i><i class="fa fa-check provide-icon"></i> <input type="text" class="provide-input" />  this is treatment field  
</div>