我对 JQuery 很陌生，我的问题是我有 3 个输入字段来输入有关汽车的信息(年份、品牌、型号)，如果填写了这些字段，那么年份、品牌和型号就会被插入一个garage 数组。但是，由于当前编写的代码是在未填写字段且单击“添加汽车”按钮的情况下编写的，因此会有一个空字符串被推送到数组中。我的作业特别指出，如果用户在字段为空时单击按钮，则不要推送空数组。
<body>
<div id="contents">
<h1>Week 6 Prework Assignment</h1>
<div id="input">
<input placeholder="Year" id="yearInput"/>
<input placeholder="Make" id="makeInput"/>
<input placeholder="Model" id="modelInput"/>
<button type="submit" id="addCarButton">Add Car Button</button>
<ul id='carList'>
</ul>
</div>
</div>
class Car{
constructor( year, make, model ){
this.year = year;
this.make = make;
this.model = model;
} //end constructor
} // end Car class
let garage = [];
function newCar( year, make, model ){
console.log( 'in newCar:', year, make, model );
garage.push( new Car( year, make, model ) );
return true;
}
// on document load
$( document ).ready(function(){
$('#addCarButton').on('click', function newCar(){
// declare new variable 'addedCar' and set equal to value of year, make and model inputs
let addedCar = new Car( $( '#yearInput' ).val(), $( '#makeInput' ).val(), $( '#modelInput' ).val() );
// push 'addedCar' variable to 'garage' array
garage.push( addedCar );
// run 'updateCars' function
updateCars();
// run 'textRequired' function
textRequired();
// empty year, make, model inputs
$('#yearInput').val( '' );
$('#makeInput').val( '' );
$('#modelInput').val( '' );
});
}); //end ready document
function updateCars(){
console.log('in updateCars');
// loop through and display cars on DOM
let carOutput = $('#carList');
carOutput.empty();
for(let car of garage ){
carOutput.append( '<li>' + car.year + ' ' + car.make + ' ' + car.model + '</li>');
} // end for of loop
} // end updateCars
function textRequired(){
if($('#yearInput').val()==='' || $('#makeInput').val()==='' || $('#modelInput').val()===''){
alert('Please enter text in the required fields');
}
}
最佳答案
if 语句将在插入数组之前检查值，如果任何输入为空，则不会发生任何事情
class Car{
constructor( year, make, model ){
this.year = year;
this.make = make;
this.model = model;
} //end constructor
} // end Car class
let garage = [];
function newCar( year, make, model ){
console.log( 'in newCar:', year, make, model );
garage.push( new Car( year, make, model ) );
return true;
}
// on document load
$( document ).ready(function(){
$('#addCarButton').on('click', function newCar(){
if($( '#yearInput' ).val() && $( '#makeInput' ).val() && $( '#modelInput' ).val()){
let addedCar = new Car( $( '#yearInput' ).val(), $( '#makeInput' ).val(), $( '#modelInput' ).val() );
// push 'addedCar' variable to 'garage' array
garage.push( addedCar );
// run 'updateCars' function
updateCars();
// run 'textRequired' function
textRequired();
// empty year, make, model inputs
$('#yearInput').val( '' );
$('#makeInput').val( '' );
$('#modelInput').val( '' );
}
});
// declare new variable 'addedCar' and set equal to value of year, make and model inputs
}); //end ready document
function updateCars(){
console.log('in updateCars');
// loop through and display cars on DOM
let carOutput = $('#carList');
carOutput.empty();
for(let car of garage ){
carOutput.append( '<li>' + car.year + ' ' + car.make + ' ' + car.model + '</li>');
} // end for of loop
} // end updateCars
function textRequired(){
if($('#yearInput').val()==='' || $('#makeInput').val()==='' || $('#modelInput').val()===''){
alert('Please enter text in the required fields');
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="contents">
<h1>Week 6 Prework Assignment</h1>
<div id="input">
<input placeholder="Year" id="yearInput"/>
<input placeholder="Make" id="makeInput"/>
<input placeholder="Model" id="modelInput"/>
<button type="submit" id="addCarButton">Add Car Button</button>
<ul id='carList'>
</ul>
</div>
</div>关于javascript - 不推送数组的表单验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49680335/