Question

我已经开了一家电子商店来学习更多的javascript。产品页面上会显示产品库。如果单击一个产品，则会弹出带有说明的放大图片。问题是，如果您进行搜索，然后单击产品，则显示错误的产品。

它显示的是gallery数组中的产品，而不是matches。不好解释，但这里是代码：

    /*
    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(gallery) {
    // get ul
    var ul = document.getElementById("product_list");
    // empty its content
    ul.innerHTML = "";

    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.id = i;
        productImg.className = "thumbnail";
        productImg.addEventListener("click", showItem);
        li.appendChild(productImg); 

        // create caption
        li.appendChild(document.createTextNode(currentProduct.title + " " + currentProduct.price + "kr"));                                         
        ul.appendChild(li);
    }

function showItem() {
    // get the single item div
    var single_item_page = document.getElementById("single_item");

    // empty its content

    single_item_page.innerHTML = "";

    // add the name of the product
    var h2 = document.createElement('h2');
    h2.appendChild(document.createTextNode(gallery[this.id].title));

    single_item_page.appendChild(h2);

    // add the image    
    var productImg = document.createElement('img');
    productImg.src = gallery[this.id].img;
    productImg.className = "single_img";
    single_item_page.appendChild(productImg);

    // add the text
    var productText = document.createElement('p');
    productText.appendChild(document.createTextNode(gallery[this.id].about + " " + gallery[this.id].price + "kr"));
    single_item_page.appendChild(productText);

    // add the close button
    var closeButton = document.getElementById("close_button");
    closeButton.addEventListener("click", displayNone);

    // add the buy button
    var buy_button = document.createElement('button');
    buy_button.innerHTML = "Add to cart";
    buy_button.id = this.id; 
    buy_button.addEventListener("click", addToCart);
    single_item_page.appendChild(buy_button);   

    // display the layer
    document.getElementById("overlay").style.display = "block";

    // if the exc button is pushed 
    document.onkeydown = function(event) {
        if (event.keyCode == 27) {
            document.getElementById("overlay").style.display = "none";
        }
    };
}

/*
    A searchfield where you can search for yout item. 
    A for loop is checking the search value is equal to a category in the array
    Show only those items that been search for
*/
function searchItem() {
    // create a array for the matches
    var matches = [];

    // get the search value
    var search_value = document.getElementById("search").value;
    var search = search_value.toLowerCase();

    if(search.length > 0) {

        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){

                    // push the currentProduct in the array 
                    matches.push(currentProduct);
               }
           }

        }
    }
    // call the showItemsList with matches
    showItemsList(matches);
}

Answer 1

在showItemsList中，您将每个项目的id设置为列表中的索引：

productImg.id = i;

然后在showItem中，您使用id从gallery数组中获取项目：

productImg.src = gallery[this.id].img;

使用searchItem进行搜索时，会显示项目的子集。与显示整个gallery数组时相比，每个项目的ID都不同。但是，在showItem中，您仍然会从gallery数组中提取项目数据，从而导致错误的项目。

您应该维护对搜索产生的项目列表的引用，并将其用作showItem使用的数组。

var currentGallery = [];

function showItemsList(gallery) {
    currentGallery = gallery;
    // ...
}

function showItem() {
    // use currentGallery instead of gallery, in each place it is used in this method
}

搜索项功能在数组中给出错误的值

1 个答案: