검색 항목 함수가 배열에 잘못된 값을 제공합니다.

Question

나는 더 많은 자바 스크립트를 배우기 위해 전자 상점을 만들었습니다. 제품 갤러리는 제품 페이지에 표시됩니다. 하나의 제품을 클릭하면 설명이있는 큰 그림이 나옵니다. 문제는 검색을 한 다음 제품을 클릭하면 잘못된 제품이 표시된다는 것입니다.

이 제품에는 gallery 어레이의 제품이 표시되어 있으며 matches이 아닙니다.

productImg.id = i; 

다음 showItem에, 당신은 id로를 사용, 당신은 목록에서 인덱스에 각 항목의 id을 설정 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(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

: 여기에 설명하지만,에 나쁜 코드입니다 gallery 배열에서 항목을 가져 오기 :

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

당신이를 사용하여 검색 할 때, 항목의 하위 집합을 표시합니다. 각 항목은 전체 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 
}