我想在下拉列表中显示与用户选择相对应的汽车列表。假设，如果他们选择SUV，那么SUV汽车表就会出现。不知何故，我的代码似乎无法正常工作。当我全部选择时，就可以了-除此之外，它什么也没显示。
我做错了什么？我怀疑调用displayListing时在事件处理程序中出错了。
//step-1: add jQuery ready method to hold entire js code in this script
$(document).ready(function(){
// Define a car object using a constructor function
function Car(id, car_make, car_model, car_year, car_type, car_color, car_price, car_mileage) {
this.stockid = id;
this.make = car_make;
this.model = car_model;
this.year = car_year;
this.type = car_type;
this.color = car_color;
this.price = car_price;
this.mileage = car_mileage;
this.qty = 0;
this.display = function(){
var this_str = "<td>" + this.stockid + "</td><td>" + this.make + "</td>";
this_str += "<td>" + this.model + "</td><td>" + this.year + "</td><td>" + this.type + "</td>";
this_str += "<td>" + this.color + "</td><td>$" + this.price + "</td>";
this_str += "<td>" + this.mileage + "</td>";
return this_str;
}
}
// Declare an array of objects
var car_list = []; // var car_list = new Array();
// Create an instance of the Car object and add it to the car_list array
car_list.push(new Car(1001, "Toyota", "Camry", 2011, "Sedan", "Gray", 17555, 55060));
car_list.push(new Car(1002, "Volvo", "s40", 2013, "Sedan", "Black", 15575, 20350));
car_list.push(new Car(1251, "Toyota", "Sienna", 2008, "Minivan", "Gray", 15775, 70000));
car_list.push(new Car(1321, "Porsche", "Panamera", 2012, "SUV", "Red", 104250, 10567));
car_list.push(new Car(1904, "Honda", "Accord", 2009, "Sedan", "White", 13370, 35000));
car_list.push(new Car(1855, "Toyota", "Highlander", 2008, "SUV", "Silver", 18555, 55060));
car_list.push(new Car(1543, "Ford", "Fusion", 2011, "Sedan", "Black", 13575, 90350));
car_list.push(new Car(1345, "Toyota", "Sienna", 2011, "Minivan", "Gray", 25775, 70000));
car_list.push(new Car(2133, "Dodge", "Caravan", 2012, "Minivan", "Red", 30250, 17567));
car_list.push(new Car(2999, "Lexus", "LFA", 2012, "coupe", "Red", 381370, 3500));
car_list.push(new Car(3001, "Ferrari", "Rubino", 2012, "coupe", "Red", 354370, 5500));
car_list.push(new Car(4002, "Audi", "R8", 2012, "SUV", "Black", 181370, 4500));
//Step-2 (a): call displayDropdown() function to set up the drop down selection list
displayDropdown();
//Step-2 (d): use jQuery event method .on() to add an event handler to the drop down list
//so that when users change selection option based on car type,
//then only that type of cars will be displayed in the car list table in the web page.
$('#car-category').on('change', function(){
var cat = $(this).val();
console.log(cat);
displayListing(cat);
} );
/*****************************/
/* displayDropdown() */
/*****************************/
function displayDropdown(){
var currentCat = 'select';
var output = "<option value=\'"+ currentCat + "\'>Select a category to display</option>";
var addedCats = [];
//Step-3 (a): add script code here to add options to the drop down list
for(var i = 0; i < car_list.length; i++) {
currentCat = car_list[i].type;
//check whether the car's type has been included in the drop down list, if not, then add that category to the list
//Array.indexOf(currentItem) is used to check whether currentItem is in the array, if not, then -1 will be returned.
if (addedCats.indexOf(currentCat)==-1) { //did not find currentCat in addedCats array
addedCats.push(currentCat); //add currentCat to addedCats array, and then create
//an <option> element for that category
output += "<option value='" + currentCat + "' class='cat-select'>" + currentCat + "</option>";
//console.log("added " + currentCat);
}
//console.log(addedCats);
} // end for loop
//add one more category as an <option> element which is used to display all products
currentCat = "All";
output += "<option value='" + currentCat + "' class='cat-select'>" + currentCat + "</option>";
// output is a string used to hold all new <option> elements
$('#car-category').html(output);
}
/*****************************/
/* displayListing() */
/*****************************/
function displayListing(cat){
//Step-2 (b): Add jQuery code in this function to remove class "hide" from car list table.
$('#car-list').removeClass('hide');
var displayAll = false;
if (cat == "All") {
displayAll = true;
}
if (cat == "select") {
$('#car-list tbody').html("");
}
var body="";
//add table body
//step-2 (c):add js code to complete the for loop and if statement to display car list in the web page according to
//users’ selection on car type
for(var i = 0; i < car_list.length; i++) {
if(car_list[i].category == cat || displayAll == true) {
console.log("add table list: " + cat);
body += "<tr class='car-item' id='l-"+ i + "'>";
body += car_list[i].display();
body += "<td><button type='button' value='" +
i + "' class='btn btn-primary add-item'>Add</button></td>";
body += "</tr>";
}
}
$('#car-list tbody').html(body);
}
//define an array (global variable) to store indices of the items added to the shopping cart*/
var cart = [];
//Step-3 (a): Apply jQuery event delegation technique to add event handler so that when users click Add buttons,
//the selected cars will be added to the shopping cart without any duplication,
//the selected cars’ information including stockid, make, model, price, quantity and type will be displayed
//in the shopping cart list on the web page, the number of items in the shopping cart as well as the Checkout
//invoice information including subtotal, tax, registration fee, and total amount will be updated.
$('#car_list').on('click', '.add-item', function(){
var index = $(this).val();
if (cart.indexOf(index)== -1)
{ cart.push(index);
//console.log("Cart array is currently: " + cart);
}
addQty(index);
updateShoppingCart();} );
/****************/
/* addQty() */
/****************/
function addQty(index) {
car_list[index].qty++;
}
/*****************************/
/* updateShoppingCart() */
/*****************************/
function updateShoppingCart(){
//step 3(b): Add jQuery code in this function to remove class "hide" from shopping cart table,
//and also from check out table.
$('#cart table').removeClass('hide');
$('#checkout table').removeClass('hide');
//console.log("Cart array is currently: " + cart);
//display shopping cart
displayCartItems();
// update total items
updateItemTotal();
//Update final checkout data
calculateCheckoutCost();
}
/**************************/
/* displayCartItems() */
/**************************/
function displayCartItems(){
/* use this method to display items in the shopping cart.
This method should redisplay the 'shopping cart'
table when we add or delete items.*/
// add each product to shopping cart
var runError = true;
var elm='';
for (var i=0; i<cart.length; i++){
//create a table row and add stockId, make, cost, quantity, and type info of the selected cars to the cart table
elm += "<tr><td class=\'col-xs-1\'>"+ car_list[cart[i]].stockid + "</td>";
elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].make + "</td>";
elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].model + "</td>";
elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].price + "</td>";
elm += "<td class=\'col-xs-1\'><input type=\'text\' id=\'" + cart[i] + "\' name=\'qty-" + i +
"\' size=\'1\' value=\'"+ car_list[cart[i]].qty + "\'></td>";
elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].type + "</td>";
elm += "<td class=\'col-xs-1\'><button type=\'button\' value=\'" + i + "\' class=\'delete-item\'>Delete</button></td></tr>";
runError = false; // = cart is not empty
}
if (runError) { //if cart is empty
elm += "Your cart is empty.";
}
//step 3(d): add a jQuery selector
//console.log(elm);
$('#mycart tbody').html(elm); // modify the table
}
/*****************************/
/* updateItemTotal() */
/*****************************/
function updateItemTotal(){
// update the total items
var total = cart.length;
$('#items').text(total);
}
/*******************************/
/* calculateCheckoutCost() */
/*******************************/
function calculateCheckoutCost(){
//Display total number of cars in the cart
var taxRate = 0.06;
var feeRate = 0.05;
var subtotal = 0;
var tax = 0;
var fee = 0;
var total = 0;
//Calculate subtotal
var subtotal = 0;
//step 6: add js code here to calculat subtotal, tax, fee, and total amount
//display those information to web page by using jQuery selector, jQuery .text() method.
}
//Step-4: Apply jQuery event delegation technique to add event handler so that when users click Delete buttons
//the selected cars will be removed from the shopping cart and removed from the shopping cart list in the web page as well.
//Meanwhile, the number of items in the shopping cart as well as the Checkout invoice information including subtotal, tax,
//registration fee, and total amount will be updated.
/*****************************/
/* deleteItemFromCart() */
/*****************************/
function deleteItemFromCart(index){
/* remove the element with a given index from the cart array and update shopping cart
use splice() method, Syntax: array_name.splice(start, how many elements)
The splice() method removes elements starting from 'start' positions. The second arguments defines the number of elements to be removed.
*/
//step 3(f): add script to update the ordering quantity of selected car and use splice method to
//remove that selected car from the shopping cart.
car_list[cart[index]].qty = 0;
cart.splice(index, 1);
}
//Step-5: Apply jQuery event delegation technique to add event handler so that when users change the ordering
//quantities of selected cars in the shopping list in the web page,
//the ordering quantities of selected cars the Checkout invoice information including subtotal, tax, registration fee,
// and total amount will be updated.
/*****************************/
/* updateCartItemQty() */
/*****************************/
function updateCartItemQty(input) {
var value = 0;
value = parseInt($("#" + input.id).val());
var index = parseInt(input.id);
car_list[index].qty = value;
}
});<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Auto Shop - Used Cars</title>
<!--Include bootstrap CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Include JQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include external js file (JQuery_auto_shop.js) here -->
<script src="JQuery_auto_shop.js"></script>
<style>
td{ padding: 5px; margin: 5px;}
.addme { height: 28px; width: 80px; padding: 0; }
.clm-label { background: #333; color: #fff;}
.hide {display: none}
</style>
</head>
<body class='container'>
<div class='col-md-9' >
<h2>Choose a car type </h2> <!--drop down list -->
<select id="car-category" name="car-category">
<option value='null'>Loading....</option>
</select>
</div>
<div class='col-md-9'>
<h2>Car List</h2> <!-- car list -->
<table class='table hide' id='car-list'>
<thead><!--car list table header -->
<tr class='clm-label'>
<th class='clm-label'>Stock ID</th>
<th class='clm-label'>Make</th>
<th class='clm-label'>Model</th>
<th class='clm-label'>Year</th>
<th class='clm-label'>Type</th>
<th class='clm-label'>Color</th>
<th class='clm-label'>Price</th>
<th class='clm-label'>Mileage</th>
<th class='clm-label'>Select</th>
</tr>
</thead>
<tbody id='car-list'><!--car list table body -->
</tbody>
</table>
</div>
<div class='col-md-3' id="cart">
<h2>Shopping Cart</h2>
<div>You have <span id="items">0</span> items in your Shopping Cart</div>
<table class='table hide' id='mycart'><!--Shopping Cart list table -->
<thead><!--table header -->
<tr>
<th class='clm-label'>Stock Id</th>
<th class='clm-label'>Make</th>
<th class='clm-label'>Model</th>
<th class='clm-label'>Price</th>
<th class='clm-label'>Quantity</th>
<th class='clm-label'>Type</th>
<th class='clm-label'></th>
</tr>
</thead>
<tbody><!--table body -->
</tbody>
</table>
</div>
</div>
<div class='col-md-9' id="checkout">
<h2>Check Out</h2>
<table class='table hide' ><!--Check Out table -->
<tr><th class='col-xs-4'>Subtotal: </th><td class='col-xs-2' id='sub-total'>0</td></tr>
<tr><th class='col-xs-4'>Taxes (6%): </th><td class='col-xs-2' id='taxes'>0</td></tr>
<tr><th class='col-xs-4'>Registration fee (5%): </th><td class='col-xs-2' id='registration'>0</td></tr>
<tr><th class='col-xs-4'>Total due: </th><td class='col-xs-2' id='total'>0</td></tr>
</table>
</div>
</body>
</html>
答案 0 :(得分：1)
问题是您在displayListing（）函数中使用了错误的属性。
此行：
.observe()您在使用car_list [i] .category时应使用car_list [i] .type。
Car对象没有名为category的属性。您应该将行更改为如下所示：
if(car_list[i].category == cat || displayAll == true) {
这是完整的代码段：
if(car_list[i].type == cat || displayAll == true) {
//step-1: add jQuery ready method to hold entire js code in this script
$(document).ready(function(){
// Define a car object using a constructor function
function Car(id, car_make, car_model, car_year, car_type, car_color, car_price, car_mileage) {
this.stockid = id;
this.make = car_make;
this.model = car_model;
this.year = car_year;
this.type = car_type;
this.color = car_color;
this.price = car_price;
this.mileage = car_mileage;
this.qty = 0;
this.display = function(){
var this_str = "<td>" + this.stockid + "</td><td>" + this.make + "</td>";
this_str += "<td>" + this.model + "</td><td>" + this.year + "</td><td>" + this.type + "</td>";
this_str += "<td>" + this.color + "</td><td>$" + this.price + "</td>";
this_str += "<td>" + this.mileage + "</td>";
return this_str;
}
}
// Declare an array of objects
var car_list = []; // var car_list = new Array();
// Create an instance of the Car object and add it to the car_list array
car_list.push(new Car(1001, "Toyota", "Camry", 2011, "Sedan", "Gray", 17555, 55060));
car_list.push(new Car(1002, "Volvo", "s40", 2013, "Sedan", "Black", 15575, 20350));
car_list.push(new Car(1251, "Toyota", "Sienna", 2008, "Minivan", "Gray", 15775, 70000));
car_list.push(new Car(1321, "Porsche", "Panamera", 2012, "SUV", "Red", 104250, 10567));
car_list.push(new Car(1904, "Honda", "Accord", 2009, "Sedan", "White", 13370, 35000));
car_list.push(new Car(1855, "Toyota", "Highlander", 2008, "SUV", "Silver", 18555, 55060));
car_list.push(new Car(1543, "Ford", "Fusion", 2011, "Sedan", "Black", 13575, 90350));
car_list.push(new Car(1345, "Toyota", "Sienna", 2011, "Minivan", "Gray", 25775, 70000));
car_list.push(new Car(2133, "Dodge", "Caravan", 2012, "Minivan", "Red", 30250, 17567));
car_list.push(new Car(2999, "Lexus", "LFA", 2012, "coupe", "Red", 381370, 3500));
car_list.push(new Car(3001, "Ferrari", "Rubino", 2012, "coupe", "Red", 354370, 5500));
car_list.push(new Car(4002, "Audi", "R8", 2012, "SUV", "Black", 181370, 4500));
//Step-2 (a): call displayDropdown() function to set up the drop down selection list
displayDropdown();
//Step-2 (d): use jQuery event method .on() to add an event handler to the drop down list
//so that when users change selection option based on car type,
//then only that type of cars will be displayed in the car list table in the web page.
$('#car-category').on('change', function(){
var cat = $(this).val();
console.log(cat);
displayListing(cat);
} );
/*****************************/
/* displayDropdown() */
/*****************************/
function displayDropdown(){
var currentCat = 'select';
var output = "<option value=\'"+ currentCat + "\'>Select a category to display</option>";
var addedCats = [];
//Step-3 (a): add script code here to add options to the drop down list
for(var i = 0; i < car_list.length; i++) {
currentCat = car_list[i].type;
//check whether the car's type has been included in the drop down list, if not, then add that category to the list
//Array.indexOf(currentItem) is used to check whether currentItem is in the array, if not, then -1 will be returned.
if (addedCats.indexOf(currentCat)==-1) { //did not find currentCat in addedCats array
addedCats.push(currentCat); //add currentCat to addedCats array, and then create
//an <option> element for that category
output += "<option value='" + currentCat + "' class='cat-select'>" + currentCat + "</option>";
//console.log("added " + currentCat);
}
//console.log(addedCats);
} // end for loop
//add one more category as an <option> element which is used to display all products
currentCat = "All";
output += "<option value='" + currentCat + "' class='cat-select'>" + currentCat + "</option>";
// output is a string used to hold all new <option> elements
$('#car-category').html(output);
}
/*****************************/
/* displayListing() */
/*****************************/
function displayListing(cat){
//Step-2 (b): Add jQuery code in this function to remove class "hide" from car list table.
$('#car-list').removeClass('hide');
var displayAll = false;
if (cat == "All") {
displayAll = true;
}
if (cat == "select") {
$('#car-list tbody').html("");
}
var body="";
//add table body
//step-2 (c):add js code to complete the for loop and if statement to display car list in the web page according to
//users’ selection on car type
for(var i = 0; i < car_list.length; i++) {
//cahnge this to type instead of category
if(car_list[i].type == cat || displayAll == true) {
console.log("add table list: " + cat);
body += "<tr class='car-item' id='l-"+ i + "'>";
body += car_list[i].display();
body += "<td><button type='button' value='" +
i + "' class='btn btn-primary add-item'>Add</button></td>";
body += "</tr>";
}
}
$('#car-list tbody').html(body);
}
//define an array (global variable) to store indices of the items added to the shopping cart*/
var cart = [];
//Step-3 (a): Apply jQuery event delegation technique to add event handler so that when users click Add buttons,
//the selected cars will be added to the shopping cart without any duplication,
//the selected cars’ information including stockid, make, model, price, quantity and type will be displayed
//in the shopping cart list on the web page, the number of items in the shopping cart as well as the Checkout
//invoice information including subtotal, tax, registration fee, and total amount will be updated.
$('#car_list').on('click', '.add-item', function(){
var index = $(this).val();
if (cart.indexOf(index)== -1)
{ cart.push(index);
//console.log("Cart array is currently: " + cart);
}
addQty(index);
updateShoppingCart();} );
/****************/
/* addQty() */
/****************/
function addQty(index) {
car_list[index].qty++;
}
/*****************************/
/* updateShoppingCart() */
/*****************************/
function updateShoppingCart(){
//step 3(b): Add jQuery code in this function to remove class "hide" from shopping cart table,
//and also from check out table.
$('#cart table').removeClass('hide');
$('#checkout table').removeClass('hide');
//console.log("Cart array is currently: " + cart);
//display shopping cart
displayCartItems();
// update total items
updateItemTotal();
//Update final checkout data
calculateCheckoutCost();
}
/**************************/
/* displayCartItems() */
/**************************/
function displayCartItems(){
/* use this method to display items in the shopping cart.
This method should redisplay the 'shopping cart'
table when we add or delete items.*/
// add each product to shopping cart
var runError = true;
var elm='';
for (var i=0; i<cart.length; i++){
//create a table row and add stockId, make, cost, quantity, and type info of the selected cars to the cart table
elm += "<tr><td class=\'col-xs-1\'>"+ car_list[cart[i]].stockid + "</td>";
elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].make + "</td>";
elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].model + "</td>";
elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].price + "</td>";
elm += "<td class=\'col-xs-1\'><input type=\'text\' id=\'" + cart[i] + "\' name=\'qty-" + i +
"\' size=\'1\' value=\'"+ car_list[cart[i]].qty + "\'></td>";
elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].type + "</td>";
elm += "<td class=\'col-xs-1\'><button type=\'button\' value=\'" + i + "\' class=\'delete-item\'>Delete</button></td></tr>";
runError = false; // = cart is not empty
}
if (runError) { //if cart is empty
elm += "Your cart is empty.";
}
//step 3(d): add a jQuery selector
//console.log(elm);
$('#mycart tbody').html(elm); // modify the table
}
/*****************************/
/* updateItemTotal() */
/*****************************/
function updateItemTotal(){
// update the total items
var total = cart.length;
$('#items').text(total);
}
/*******************************/
/* calculateCheckoutCost() */
/*******************************/
function calculateCheckoutCost(){
//Display total number of cars in the cart
var taxRate = 0.06;
var feeRate = 0.05;
var subtotal = 0;
var tax = 0;
var fee = 0;
var total = 0;
//Calculate subtotal
var subtotal = 0;
//step 6: add js code here to calculat subtotal, tax, fee, and total amount
//display those information to web page by using jQuery selector, jQuery .text() method.
}
//Step-4: Apply jQuery event delegation technique to add event handler so that when users click Delete buttons
//the selected cars will be removed from the shopping cart and removed from the shopping cart list in the web page as well.
//Meanwhile, the number of items in the shopping cart as well as the Checkout invoice information including subtotal, tax,
//registration fee, and total amount will be updated.
/*****************************/
/* deleteItemFromCart() */
/*****************************/
function deleteItemFromCart(index){
/* remove the element with a given index from the cart array and update shopping cart
use splice() method, Syntax: array_name.splice(start, how many elements)
The splice() method removes elements starting from 'start' positions. The second arguments defines the number of elements to be removed.
*/
//step 3(f): add script to update the ordering quantity of selected car and use splice method to
//remove that selected car from the shopping cart.
car_list[cart[index]].qty = 0;
cart.splice(index, 1);
}
//Step-5: Apply jQuery event delegation technique to add event handler so that when users change the ordering
//quantities of selected cars in the shopping list in the web page,
//the ordering quantities of selected cars the Checkout invoice information including subtotal, tax, registration fee,
// and total amount will be updated.
/*****************************/
/* updateCartItemQty() */
/*****************************/
function updateCartItemQty(input) {
var value = 0;
value = parseInt($("#" + input.id).val());
var index = parseInt(input.id);
car_list[index].qty = value;
}
});