---
# System prepended metadata

title: "\U0001F3C5 Day 41 - 商品篩選功能"
tags: [JS 直播班 - 2024 秋季班]

---

# 🏅 Day 41 - 商品篩選功能

問題
---
請同學實作「商品篩選」的功能，點擊 select 會呈現相對應類型的商品，如下圖：
> 可以使用此 [CodePen 模板](https://codepen.io/hexschool/pen/dyKOmpg?editors=1011) 

![](https://i.imgur.com/VAHbfUy.png)




## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  

請記得填入自己的 API 名稱
https://codepen.io/hexschool/pen/yLEVKXM?editors=1010

若不太清楚要怎麼做可看下方作業提示：

使用監聽事件選擇選單，
選單改變時觸發函式，
函式的部分為讀取選單的內容與 api 中的資料核對，
符合的資料則挑出來加入渲染。
-->




回報區
---
| #   | Discord | CodePen / 答案 |
| --- | ----- | ----- |
| 01 | Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/JoPPbmq) | 
| 02 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/EaYYNqJ) |
| 03 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/raBBjEO?editors=1011) |
| 04 | david1819 | [Codepen](https://codepen.io/David-Lin-the-vuer/pen/wBwweWP) |
| 05 | yuyuhunter_0509 | [CodePen](https://codepen.io/KRcube/pen/qEWWrey?editors=0010) | 
| 06 | GTR150 | [CodePen](https://codepen.io/Wer-Qwe/pen/emOOyxW?editors=1011) | 
|  07   |   Ariel    | [CodePen](https://codepen.io/ariel0510/pen/YPKKEMx?editors=1010) |
|   08  |  chris     | [CodePen](https://codepen.io/chris-chen-the-selector/pen/MYggVwP?editors=1010) |
|   09  |  Sonia     | [CodePen](https://codepen.io/YUJOU/pen/VYZZxvr?editors=1011) |
| 10 | 陳小廷 | [CodePen](https://codepen.io/ting1124/pen/jENErwY) |
| 11 | Chun | [CodePen](https://codepen.io/Chun_debbie/pen/EaYjGaJ?editors=1011) |
| 12| Chun | [CodePen](https://codepen.io/bekgnohe-the-selector/pen/zxOveyN?editors=1010) |
<!-- 可複製下方格式
|     |       | [CodePen]() | 
-->