Question

即使控制台日志指示对象内的值已更改，div的高度也不会正确更改。这是什么结果？我希望它会根据对象内部的0的数量而改变。例如，如果有一个0，那么它将减少到25px，如果有0，则减少到0px。但是，即使所有输入都已填满，它也总是减少到50px。为什么呢？

https://jsfiddle.net/r4gf716f/

$(document).ready(function() {

  var obj = {
    userLength: 0,
    passLength: 0,
  };

  $('#username').on('change', function() {
    if ($('#username').val().length < 6) {
      $('#para').html('too short - user');
      obj.userLength = 0;
      console.log('failed user');
    } else {
      $('#para').html('');
      obj.userLength = 1;
      console.log('WORKINGUSER');
    }
  })

  $('#password').on('change', function() {
    if ($('#password').val().length < 6) {
      $('#para').html('too short - pass');
      obj.passLength = 0;
      console.log('failed pass');
    } else {
      $('#para').html('');
      obj.passLength = 1;
      console.log('passed user');
    }
  })


  var errorCount = Object.keys(obj).filter(function(key) {
    return (obj[key] === 0);
  }).length;

  if (errorCount > 0) {

    $('.color').css("height", +errorCount * 25 + "px");
    console.log(errorCount);
  }

})

HTML

<body>
  <p id='para'>

  </p>

  <input type='text' id='username' placeholder='u'>
  <input type='text' id='password' placeholder='p'>

  <div class='color'>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</body>

CSS

.color {
  background-color: black;
  height: 200px;
  width: 100px;
  transition: all ease-in-out 2s;
}

Answer 1

就像apsillers说它只运行一次。我创建了一个函数来进行检查。你只需在开始时调用它，当你想检查错误时。

    $(document).ready(function() {

  var obj = {
    userLength: 0,
    passLength: 0,
  };
checkErrors();
  $('#username').on('change', function() {
    if ($('#username').val().length < 6) {
      $('#para').html('too short - user');
      obj.userLength = 0;
      console.log('failed user');
    } else {
      $('#para').html('');
      obj.userLength = 1;
      console.log('WORKINGUSER');
    }
    checkErrors();
  })

  $('#password').on('change', function() {
    if ($('#password').val().length < 6) {
      $('#para').html('too short - pass');
      obj.passLength = 0;
      console.log('failed pass');
    } else {
      $('#para').html('');
      obj.passLength = 1;
      console.log('passed user');
    }
    checkErrors();
  })

function checkErrors(){
    var errorCount = Object.keys(obj).filter(function(key) {
      return (obj[key] === 0);
    }).length;

    if (errorCount > 0) {

      $('.color').css("height", errorCount * 25 + "px");
      console.log(errorCount);
    }
}
})

修改

如果你想要.color div为0px，那就是代码：

$(document).ready(function() { var obj = { userLength: 0, passLength: 0, }; checkErrors(); $('#username').on('change', function() { if ($('#username').val().length < 6) { $('#para').html('too short - user'); obj.userLength = 0; console.log('failed user'); } else { $('#para').html(''); obj.userLength = 1; console.log('WORKINGUSER'); } checkErrors(); }) $('#password').on('change', function() { if ($('#password').val().length < 6) { $('#para').html('too short - pass'); obj.passLength = 0; console.log('failed pass'); } else { $('#para').html(''); obj.passLength = 1; console.log('passed user'); } checkErrors(); }) function checkErrors(){ var errorCount = Object.keys(obj).filter(function(key) { return (obj[key] === 0); }).length; $('.color').css("height", errorCount * 25 + "px"); console.log(errorCount); } })

对象没有被正确解释JavaScript

1 个答案: