javascript - JS - 我想为我的事件创建一个下拉过滤器菜单

Question

我对使用 JS 进行编码还很陌生，所以我似乎不知道如何创建一个可以过滤内容以仅在我的页面上显示某些事件的下拉过滤器菜单。

如果您需要更多信息，请询问，这也是我的第一个 Stackoverflow 帖子，所以我不知道要包含多少。

先感谢您！

HTML

<section id="events">
        <main>
            <section class="container" data-container></section>
            <template data-template>
            <article class="postListview">
                <div class="card middle">
                     <div class="front">
                <img src="" alt="">
                    </div>
                 <div class="back">
                     <div class="back-content middle">
             <h2 data-title></h2>
             <div data-text></div>
                <div data-pris></div>
                <div data-tid></div>
                <div data-sted></div>
                </div>
                     </div>
                    </div>
             </article>
         </template>
        </main>

JS

<script>
document.addEventListener("DOMContentLoaded", getJSON);

    let posts;
    let postTemplate = document.querySelector("[data-template]");
    let postContainer = document.querySelector("[data-container]");

    async function getJSON() {
        let jsonData = await fetch("http://www.rigmordesign.com/kea/huset/wordpress/wp-json/wp/v2/events");
        posts = await jsonData.json();
        visPosts();
    }

    function visPosts() {
        console.log(posts);
        posts.forEach(post => {
            let klon = postTemplate.cloneNode(true).content;
            klon.querySelector("[data-title]").textContent = post.title.rendered;
            klon.querySelector("[data-text]").innerHTML = post.content.rendered;

            klon.querySelector("[data-pris]").innerHTML = post.acf.pris;
            klon.querySelector("[data-tid]").innerHTML = post.acf.tid;
            klon.querySelector("[data-sted]").innerHTML = post.acf.sted;
            klon.querySelector("img").src = post.acf.billede;
            postContainer.appendChild(klon);
        })
    }
</script>

标签： javascript