javascript - 怎样用jq实现两个input输入同时不为空时，改变确认框背景颜色？

Question

        <li class="wb-real-name">
            <label class="real-name" for="">真实姓名：</label>
            <input type="text" id="input1" placeholder="请输入您的真实姓名" />
        </li>
        <li class="wb-id-card">
            <label class="id-card" for="">身份证号：</label>
            <input type="text" id="input2" placeholder="请输入您的身份证号码"/>
        </li>
        <li class="wb-submit">
            <input type="submit" class="submit" id="sb" value="确定">
        </li>

如上，我想实现：在上面两个input输入框同时存在内容时，下面的确认框 改变背景颜色。
然后下面是我写的jq代码，，小白求指教

$(function(){
    if(($('#input1').val() !="") && ($('#input2').val() !="")){
        $('#sb').css('background','#f03468');
    }else{
        $('#sb').css('background','#999');
    };
});

Answer 1

• 绑定对input的实时监听。

• 每次两个输入框发生任何改变的时候，都应该去触发你写的方法。

$(function(){

    $('input').bind('input propertychange', function() {

      if(($('#input1').val() !="") && ($('#input2').val() !="")){
        $('#sb').css('background','#f03468');
      } else {
         $('#sb').css('background','#999');
      }

    });
  
  });

Answer 2

在楼上的基础上加一个$.trim()对输入为空字符串进行过滤

$(function(){
    $('input').on('input propertychange', function() {

      if(($.trim($('#input1').val()) !== "") && ($.trim($('#input2').val()) !== "")){
        $('#sb').css('background','#f03468');
      } else {
         $('#sb').css('background','#999');
      }
    });
  
  });