Question

我对JQuery很新，我的问题是我有3个输入字段来输入关于汽车的信息（年份，品牌，型号），如果填写了字段，则年份，品牌和型号被推入Add Car数组。但是，由于我的代码当前已写入，如果未填写字段并单击<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');
  }
}

{{1}}

Answer 1

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>

Answer 2

您可以检查年份，品牌和型号的值，如果其中任何一个为空，则返回false。

这可以按如下方式完成：

$('#addCarButton').on('click', function newCar() {
    if (!$('#yearInput').val() || !$('#makeInput').val() || !$('#modelInput').val()) {
        return false;
    }
    // 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('');
});

我认为这样做比将所有代码封装在if语句中要好得多。

进一步提示：

考虑缓存多次使用的变量：

var $ year = $（＆＃39;＃yearInput＆＃39;）， $ make = $（＆＃39;＃makeInput＆＃39;）， $ model = $（＆＃39; #modeInput＆＃39;）;

//现在，将它们用作： $ year.val（）;
添加一个公共类，说＆＃34;字段＆＃34;在所有领域并将其清除为：

$（＆＃34;点域＆＃34）。VAL（＆＃34;＆＃34）;

表格验证而不推送数组

2 个答案: