使用纯 JavaScript 搜索过滤器，用于 HTML/CSS 中的图像网格

Question

我来自葡萄牙的亚速尔群岛，我正在做一个项目来展示亚速尔群岛的小径。我正在使用 html/css 中的图像网格来显示亚速尔群岛的一些旅游机构，但我对其中一个要求有疑问，用纯 JavaScript 构建了一个搜索过滤器来过滤岛屿的机构。如果有人可以帮助我，我将不胜感激，这是我的代码！    <section class="oferta">            <h1 class="titulo">Oferta Turística</h1>            <div id="btn-container">                <button class="btn-oferta active" onclick="selecaoFiltro('todas')">Mostrar Todas</button>                <button class="btn-oferta active" onclick="selecaoFiltro('s-miguel')">São Miguel</button>                <button class="btn-oferta active" onclick="selecaoFiltro('terceira')">Terceira</button>                <button class="btn-oferta active" onclick="selecaoFiltro('graciosa')">Graciosa</button>                <button class="btn-oferta active" onclick="selecaoFiltro('s-jorge')">São Jorge</button>                <button class="btn-oferta active" onclick="selecaoFiltro('pico')">Pico</button>                <button class="btn-oferta active" onclick="selecaoFiltro('faial')">Faial</button>            </div>            <div class="oferta-container">                <div class="item filtro s-miguel">                    <div class="oferta-item" style="background-image: url(imgs/oferta/azores_getaways.png"></div>                    <h1>Azores Getaways - São Miguel</h1>                    <h2>Contactos:</h2>                    <a href="https://azoresgetaways.com/">WebSite - Azores Getaways</a>                    <p>Email: - [e-mail]</p>                    <p>Telefone: [phone]</p>                </div>                <div class="item filtro s-miguel">                    <div class="oferta-item" style="background-image: url(imgs/oferta/melo_travel.png"></div>                    <h1>Melo Travel - São Miguel</h1>                    <h2>Contactos:</h2>                    <a href="http://www.melotravel.com">WebSite - Melo Travel</a>                    <p>Email: - [e-mail]</p>                    <p>Telefone: [phone]</p>                </div>