javascript - 输入不为空时如何设置图标颜色？

Question

我希望当我专注于输入或输入不为空时更改输入相关图标的颜色。但是当输入不为空时我的代码无法正常工作。

                    <div class="form-group">
                        <label class="label-login" for="emailInput">Email</label>
                        <input type="email" class="form-control" autocomplete="off" id="emailInput" />
                        <i class="fa fa-envelope"></i>
                    </div>
                    <div class="form-group">
                        <label class="label-login" for="passInput">Password</label>
                        <input type="password" class="form-control" autocomplete="off" id="passInput" />
                        <i class="fa fa-lock"></i>

                    </div>

   $(document).ready(function () {
     $(".myPanel .form-control").each(function () {
    var valueInput = $(this);
    valueInput.focus(function () {
        valueInput.next().addClass("colorOrange");    
    });

    valueInput.blur(function () {
        valueInput.next().removeClass("colorOrange");
    });
    valueInput.on('input', function () {
        if (valueInput.val().length > 0) {
            valueInput.prev().addClass("lableFocus");
            valueInput.next().addClass("colorOrange");
        } else {
            valueInput.prev().removeClass("lableFocus");
            valueInput.next().removeClass("colorOrange");
        }
    });
   });
});
  .colorOrange{
       color:#FFAE00;
  }

Answer 1

这是一个解决方案，我设法减少了代码的长度。希望这会有所帮助。

$( ".form-control" ).focusin(function() {
  $( this ).next( "i" ).css( "color", "#FFAE00" );
});
$( ".form-control" ).focusout(function() {
  $(this).val().length === 0 ? fontColor = "#000" : fontColor = "#FFAE00";
  $(this).next( "i" ).css( "color", fontColor );
});

.colorOrange {
  color: #FFAE00;
}

<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/3.1.1/jquery.min.js"></script>

<div class="form-group">
  <label class="label-login" for="emailInput">Email</label>
  <input type="email" class="form-control" autocomplete="off" id="emailInput" />
  <i class="fa fa-envelope"></i>
</div>
<div class="form-group">
  <label class="label-login" for="passInput">Password</label>
  <input type="password" class="form-control" autocomplete="off" id="passInput" />
  <i class="fa fa-lock"></i>
</div>