即使控制台日志指示对象内的值已更改，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;
}
像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);
}
})