根據用戶的選擇顯示表格

Question

我想在下拉列表中顯示與用戶選擇相對應的汽車列表。 比方說，如果他們選擇 SUV，那么 SUV 汽車的表就會出現。 不知何故，我的代碼似乎不起作用。 當我全選時，這很好 - 但除此之外，它什么也沒顯示。

我做錯了什么？ 我懷疑當我調用displayListing時我在事件處理程序中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>

Answer 1

問題是您在 displayListing() 函數中使用了錯誤的屬性。

這一行：

if(car_list[i].category == cat || displayAll == true) {

當它應該是 car_list[i].type 時，您正在使用 car_list[i].category。

Car 對象沒有名為 category 的屬性。 您應該將行更改為如下所示：

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; } });

 <!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>