Question

我有一些简单的js代码，带有类构造函数，空数组和带有三个参数并创建对象的函数。我有一个带有3个输入分区以及一个按钮的HTML文件。最后，我尝试使用jquery调用newCar函数，以传递用户输入的“ YearInput”，“ MakeInput”和“ ModelInput”。

我认为应该发生的是，当按下“添加汽车”按钮时，newCar函数将运行，将用户输入传递给该函数。

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;
} // end newCar

这是HTML：

<input placeholder="year" id='YearInput'/>
<input placeholder="make" id='MakeInput'/>
<input placeholder="model" id='ModelInput'/>
<button id='AddCar'>Add Car</button>

这是jquery：

$( document ).ready(readyNow);

function readyNow() {$('#AddCar').on('click',newCar($('#YearInput').val(),
$('MakeInput').val(),$('ModelInput').val()))

};

Answer 1

您需要将.on处理函数的第二个参数包装在一个函数中。否则，它将在定义后立即执行，而不是单击即可执行，这显然是您想要的：

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;
} // end newCar

$(document).ready(readyNow);

function readyNow() {
  $('#AddCar').on('click', function() {
    newCar($('#YearInput').val(), $('#MakeInput').val(), $('#ModelInput').val());
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input placeholder="year" id='YearInput' />
<input placeholder="make" id='MakeInput' />
<input placeholder="model" id='ModelInput' />
<button id='AddCar'>Add Car</button>

还修复了#MakeInput和#ModelInput的一些错误选择器（缺少#）。

为什么不能使用jquery id值调用函数？

1 个答案: