0
我正在嘗試學習JavaScript,因此我知道這不是針對網店的最佳解決方案,而是僅用於學習。 我正在做一個搜索功能,你搜索一個類別,如果你有一個匹配,結果會顯示。我被困在最後一部分。我該如何編寫代碼才能顯示結果?顯示搜索結果
這裏是我的代碼:(不介意的showItem功能,還沒有開始對一個尚未)
$(document).ready(function() {
var gallery = [
{
"img" : "img/gallery/gameboy2.png",
"title" : "GameBoy Color [yellow]",
"about" : "A-ball",
"price" : 99,
"category" : ["Gameboy", "color", "Console", "game"]
},
{
"img" : "img/gallery/phone.png",
"title" : "Hamburger Phone",
"about" : "What is a smartphone?",
"price" : 129,
"category" : ["phone","hamburger"]
},
{
"img" : "img/gallery/gameboy.png",
"title" : "Nintendo GameBoy",
"about" : "Things doesnt get better with time. This is the shit.",
"price" : 499,
"category" : ["Game","Console", "Gameboy"]
},
{
"img" : "img/gallery/game2.png",
"title" : "SEGA",
"about" : "Things doesnt get better with time. This is the shit.",
"price" : 699,
"category" : ["Game","Console", "SEGA"]
},
{
"img" : "img/gallery/gameboy2.png",
"title" : "GameBoy Color [yellow]",
"about" : "A-ball",
"price" : 99,
"category" : ["Gameboy", "color", "Console", "game"]
},
{
"img" : "img/gallery/phone.png",
"title" : "Hamburger Phone",
"about" : "What is a smartphone?",
"price" : 129,
"category" : ["phone","hamburger"]
},
{
"img" : "img/gallery/gameboy.png",
"title" : "Nintendo GameBoy",
"about" : "Things doesnt get better with time. This is the shit.",
"price" : 499,
"category" : ["Game","Console", "Gameboy"]
},
{
"img" : "img/gallery/game2.png",
"title" : "SEGA",
"about" : "Things doesnt get better with time. This is the shit.",
"price" : 699,
"category" : ["Game","Console", "SEGA"]
}
];
var search = document.getElementById("submit_search");
search.addEventListener("click", searchItem);
showItemsList();
/*
Create a li element and append to already existing ul
Show an image of the product, and below the image show product title and price
*/
function showItemsList() {
var ul = document.getElementById("product_list");
for(i =0; i < gallery.length; i++) {
// get the current product
var currentProduct = gallery[i];
// create element li
var li = document.createElement('li');
// create product img
var productImg = document.createElement('img');
productImg.src = currentProduct.img;
productImg.className = "thumbnail";
li.appendChild(productImg);
// create caption
li.appendChild(document.createTextNode(currentProduct.title + " " + currentProduct.price + "kr"));
ul.appendChild(li);
}
}
/*
If someone click on a product, show a larger picture with a caption telling about the product
If you click the picture again, it minimize back to a thumbnail
*/
function showItem() {
}
/*
A searchfield where you can choose between already existing categories.
Show only those items that been search for
*/
function searchItem() {
var ul = document.getElementById("product_list");
var search = document.getElementById("search").value;
for(var x = 0; x < gallery.length; x++){
//Get the current product
var currentProduct = gallery[x];
//get the current product categories
var currentProductCategories = currentProduct.category;
//Loop through each category
for(var z = 0; z < currentProductCategories.length; z++){
//Check if the category is the one we are looking for
if(currentProductCategories[z] == search){
}
}
}
}
});
我試過這個和搜索功能的工作,但是當我加載頁面時畫廊沒有顯示開始... – teninchhero 2014-10-28 15:29:54
是的,當然你必須用'showItemsList(gallery);'替換'showItemsList();'在開始時傳遞你的數組.. 。 – 2014-10-28 15:33:14
我也這樣做了,它說_Uncaught TypeError:無法讀取undefined_的屬性'length',談論這段代碼'for(i = 0;我
teninchhero
2014-10-28 15:38:58