Javascript 使用按钮作为过滤器，并在激活时更改其颜色

我正在为我妹妹建立一个小型电子商务网站，我有一个左侧的导航面板来选择衣服、裤子、衬衫等类别。一次只能看到一个类别

我无法实现的是更改所选类别的背景色，如下图所示，因为我使用的是：hover，所以颜色较深，但我希望在用户单击所选按钮时更改其背景色

我想在所选按钮上添加一个新类，但是如何删除以前所选按钮上的相同类

类别

文章

js

---

您可以在js文件中定义click listener，而不是向每个按钮添加onClick

在CSS中，您需要定义所选的类

让selectedFilterElement； 函数初始化侦听器{ const buttons=document.queryselectoral.btn； buttons.forEachbutton=>button.addEventListener'click'，=>{ console.logbutton； 如果选择FilterElement{ selectedFilterElement.classList.删除“selected”； } selectedFilterElement=按钮； selectedFilterElement.classList.add'selected'； //filterSelectionbutton.dataset.filter； }; } 初始化侦听器； .选定{ 背景：红色； } 吹牛 高级 制动辅助系统

<div class="side-filter">
    <button id="btn-all" class="btn" onclick="filterSelection('all')">Voir tout</button>
    <button id="btn-hauts" class="btn" onclick="filterSelection('hauts')">Hauts</button>
    <button id="btn-bas" class="btn" onclick="filterSelection('bas')">Bas</button>
    <button id="btn-robe" class="btn" onclick="filterSelection('robe')">Robes</button>
    <button id="btn-vestes" class="btn" onclick="filterSelection('vestes')">Vestes</button>
    <button id="btn-autres" class="btn" onclick="filterSelection('autres')">Autres</button>

 <div class="articles-container">
                    <a href="#" class="article" data-filter="hauts">
                        <img class="article-front" src="images/vitrine/femme/hauts/article_1/front.jpg" alt="jupe">
                        <img class="article-back" src="images/vitrine/femme/hauts/article_1/back.jpg" alt="jupe">
                        <h4 class="article-title">Blouse chic noire Christine Laure</h4>
                        <p class="prix">59,95€</p>
                    </a>
                    <a href="#" class="article" data-filter="hauts">
                        <img class="article-front" src="images/vitrine/femme/hauts/article_2/front.jpg" alt="jupe">
                        <img class="article-back" src="images/vitrine/femme/hauts/article_2/back.jpg" alt="jupe">
                        <h4 class="article-title">Blouse en voile imprimé Terracotta Diane Laury</h4>
                        <p class="prix">54,95€</p>
                    </a>

function filterSelection(appliedFilter){
    var articles = document.querySelectorAll(".article")
    for(i = 0 ; i < articles.length ; i++){
        if(appliedFilter == "all"){
            articles[i].classList.remove("hide-item")
        }
        else if(articles[i].getAttribute("data-filter") != appliedFilter){
            articles[i].classList.add("hide-item");
        }
        else{
            articles[i].classList.remove("hide-item")
        }
    }
}