我刚刚开始。我知道 HTML、CSS、JavaScript，现在正在学习 jQuery。我有 3 个输入框和一个按钮。如果任何输入框为空，我不希望按钮可点击。这是我的代码现在的样子......
let garage = [];
const maxCars = 100;
class Car{
constructor(year, make, model){
this.year = year;
this.make = make;
this.model = model;
}
}
$(document).ready(function() {
$('#addCarButton').on('click', function() {
let newCar = new Car($('#yearInput').val(), $('#makeInput').val(), $('#modelInput').val() );
if (garage.length < maxCars){
garage.push(newCar);
} else {
console.log('Sorry garage is full');
return false;
}
updateGarage();
$('#yearInput').val('');
$('#makeInput').val('');
$('#modelInput').val('');
});
});
function newCar(year, make, model){
console.log('in newCar:', year, make, model);
garage.push(new Car(year, make, model));
return true;
}
function updateGarage() {
let outputElement = $('#garageList');
outputElement.empty();
for (let car of garage) {
outputElement.append('<li>' + Number(car.year) + ' ' + car.make + ' ' + car.model + '</li>');
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Garage</title>
</head>
<body>
<h1>Garage</h1>
<div id="garageDiv"></div>
<div id="inputDiv">
<input type="number" placeholder="year" id="yearInput" >
<input type="text" placeholder="make" id="makeInput" >
<input type="text" placeholder="model" id="modelInput" >
<button type="button" id="addCarButton">Add Car</button>
</div>
<ul id="garageList">
</ul>
<script src="scripts/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="scripts/scrap.js" charset="utf-8"></script>
</body>
</html>我认为解决方案将是这样的......
$(document).ready(function() {
$('#addCarButton').prop('disabled', true);
if ($('#modelInput').val().length != 0) {
$('#addCarButton').prop('disabled', false);}
$('#addCarButton').on('click', function() {
我相信禁用/启用有效，但我只是不知道使用什么条件。我所拥有的只是测试 1 个输入，但我希望它只有在每个输入中有内容时才启用按钮。
当我只运行我在这里拥有的东西时，无论如何该按钮都被禁用。如果某些随机条件为真，我可以尝试启用它。
我也觉得我需要一种方法来多次运行条件来检查，但我不确定如何。
$(function() {
let garage = [];
const maxCars = 100;
class Car {
constructor(year, make, model) {
this.year = year;
this.make = make;
this.model = model;
}
}
$('#yearInput, #makeInput, #modelInput').on('input', function(event) {
let year = $('#yearInput').val();
let make = $('#makeInput').val();
let model = $('#modelInput').val();
if(year && make && model) {
$('#addCarButton').prop('disabled', false);
}
});
$('#addCarButton').on('click', function() {
let year = $('#yearInput').val();
let make = $('#makeInput').val();
let model = $('#modelInput').val();
let newCar = new Car(year, make, model);
if (garage.length < maxCars) {
garage.push(newCar);
} else {
console.log('Sorry garage is full');
return false;
}
updateGarage();
$('#yearInput').val('');
$('#makeInput').val('');
$('#modelInput').val('');
$('#addCarButton').prop('disabled', true);
});
function newCar(year, make, model) {
console.log('in newCar:', year, make, model);
garage.push(new Car(year, make, model));
return true;
}
function updateGarage() {
let outputElement = $('#garageList');
outputElement.empty();
for (let car of garage) {
outputElement.append('<li>' + Number(car.year) + ' ' + car.make + ' ' + car.model + '</li>');
}
}
});<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h1>Garage</h1>
<div id="garageDiv"></div>
<div id="inputDiv">
<input type="number" placeholder="year" id="yearInput" >
<input type="text" placeholder="make" id="makeInput" >
<input type="text" placeholder="model" id="modelInput" >
<button type="button" id="addCarButton" disabled>Add Car</button>
</div>
<ul id="garageList">
</ul>
</body>
</html>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句