Я пытаюсь выучить 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
Да, конечно, вы должны заменить 'showItemsList();' с помощью 'showItemsList (gallery);' в начале передать ваш массив. . –
Я тоже это сделал, он говорит, что _Uncaught TypeError: Невозможно прочитать свойство length из undefined_, говорящего об этом коде 'for (i = 0; i
teninchhero