Q&A

前言

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

JavaScript重點

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

    1
    2
    3
    function displayMenuButtons(){
      // Details...
    };

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

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

    1
    2
    3
    4
    5
    6
    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程式碼

    1
    2
    3
    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的內容碼

    1
    container.innerHTML = categoryBtns;

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

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

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

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

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

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

    1
    const category = e.currentTarget.dataset.id;
    • dataset的用途，上方第3點有提到

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

    1
    2
    3
    4
    5
    const menuCategory = menu.filter(function(menuItems){
         if (menuItems.category === category){ //判斷是否為被選取的類別
             return menuItems; //回傳所需物件至menuCategory陣列中
         };
     });
    • Array.filter() : filter()會回傳一個陣列，其條件是回傳後方為true的物件，很適合用在搜尋符合條件的資料。

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

    1
    2
    3
    4
    5
    if(category === "all"){
        displayMenuItems(menu);
    }else{
        displayMenuItems(menuCategory);
    };

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

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

參考與引用來源

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