Q&A

前言

• 上次完成了清單的顯示，這次要完成的是按鈕的設置。

JavaScript重點

1. 新增displayMenuButtons()函式 : 在畫面顯示出類別按鈕

   function displayMenuButtons(){
     // Details...
   };
   

下列的程式碼都在displayMenuButtons()之內

2. 利用Array.reduce()去篩選出新的categores陣列，內含各式食物類別

   const categores = menu.reduce(function(values,item){
       if(!values.includes(item.category)){
           values.push(item.category);
       };
       return values;
   },['all']);
   

   • Array.reduce(function(accumulator, currentValue), initialValue) :
     • accumulator(即範例中的values) : 紀錄上一次呼叫後，所回傳的累加數值。(在範例中，就是紀錄著已被放入類別陣列的類別)
     • currentValue(即範例中的item) : 原陣列目前所迭代處理中的元素。(類似for迴圈中的i)
     • initialValue(即範例中的['all']) : 另外放入類別陣列的第一個元素
   • 最後，categores中會包含 : ["all", "breakfast", "lunch", "shakes", "dinner"]

3. 新增categoryBtns字串 : 將類別陣列轉成HTML的Button程式碼

   const categoryBtns = categores.map(function(category){
       return `<button class="filter-btn" type= "button" data-id = "${category}">${category}</button>`;
   }).join("");
   

   • Array.map()的功能介紹，請見【上篇】
   • 將按鈕的Class設為filter-btn
   • data-* 屬性 :
     • 可以添加一些自己需要的屬性名稱，其中*就是一個可以自定義的名稱，例如：data-key='83'或者是data-item='1'
     • 在JavaScript中，可以用dataset物件取得其屬性值(後面會用到)

4. 將categoryBtns設為類別按鈕DIV的內容碼

   container.innerHTML = categoryBtns;
   

   • innerHTML的功能介紹，請見【上篇】

5. 利用class="filter-btn"去抓取所有的類別按鈕元素

   const filterBtns = container.querySelectorAll('.filter-btn'); 
   

6. 針對每個按鈕，新增點擊事件

   filterBtns.forEach(function(btn){ //選擇每個按鈕
       btn.addEventListener('click',function(e){ //新增點擊事件
           //details...
       });
   });
   

   下列的程式碼都在btn.addEventListener()之內

7. 確認被點擊之按鈕的類別名稱

   const category = e.currentTarget.dataset.id;
   

   • dataset的用途，上方第3點有提到

8. 篩選出在menu陣列中該類別的所有物件，並存在menuCategory陣列中

   const menuCategory = menu.filter(function(menuItems){
       if (menuItems.category === category){ //判斷是否為被選取的類別
           return menuItems; //回傳所需物件至menuCategory陣列中
       };
   });
   

   • Array.filter() : filter()會回傳一個陣列，其條件是回傳後方為true的物件，很適合用在搜尋符合條件的資料。

9. 若是按"all"按鈕，則顯示所有食物；若是按了其他類別按鈕，則顯示屬於該分類的食物

   if(category === "all"){
       displayMenuItems(menu);
   }else{
       displayMenuItems(menuCategory);
   };
   

10. (回到最外層)最後，設定在網頁被讀入時，自動顯示所有內容，並顯示按鈕與開啟其功能

    window.addEventListener('DOMContentLoaded',function(){
      displayMenuItems(menu); //預設顯示所有內容
      displayMenuButtons(); //顯示按鈕與開啟其功能
    });
    

參考與引用來源

1. Array.reduce() MDN介紹
2. data-* 屬性介紹
3. Array.filter()介紹