JS将类添加到单独的html项中，而不是在单击时全部添加

Question

当我点击.classification项目时，我正试图让它们改变颜色。我已经到了将项目作为目标并放入for循环的地步，我的目的是能够识别具有该类名的所有元素，然后单独单击并使它们各自更改颜色。相反，所有项目都会同时亮起。

function categoryClicked(){
var categoryItem = document.querySelectorAll('.category-item');
for(var i = 0; i < categoryItem.length; i++){
categoryItem[i].classList.add('category-active');
}
}

.menu-categories{
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
max-width: 800px;
margin: 30px auto;
}
.category-item{
position: relative;
display: block;
width: 100px;
height: 140px;
margin: 0 5px;
background: #f6f6f6;
border-radius: 12px;
transition: .4s ease-in-out;
cursor: pointer;
}
.category-item:hover{
background: #EBF9FC;
}
.category-name{
position: absolute;
bottom: 15%;
left: 0;
right: 0;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 600;
font-style: italic;
color: #222;
text-align: center;
margin: 0;
padding: 0;
}
.category-item.category-active{
background: #FF6347 !important;
}
.category-item.category-active .category-name{
color: #f6f6f6 !important;
}

<div class="menu-categories">
<div onclick="categoryClicked()" class="category-item">
<h4 class="category-name">Item</h4>
</div>
<div onclick="categoryClicked()" class="category-item">
<h4 class="category-name">Item</h4>
</div>
<div onclick="categoryClicked()" class="category-item">
<h4 class="category-name">Item</h4>
</div>
<div onclick="categoryClicked()" class="category-item">
<h4 class="category-name">Item</h4>
</div>
<div onclick="categoryClicked()" class="category-item">
<h4 class="category-name">Item</h4>
</div>
</div>

Answer 1

您应该传递元素"这个"；在调用函数时，您可以像这样切换元素的类。

function categoryClicked(el){
el.classList.toggle('category-active');

}

.menu-categories{
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
max-width: 800px;
margin: 30px auto;
}
.category-item{
position: relative;
display: block;
width: 100px;
height: 140px;
margin: 0 5px;
background: #f6f6f6;
border-radius: 12px;
transition: .4s ease-in-out;
cursor: pointer;
}
.category-item:hover{
background: #EBF9FC;
}
.category-name{
position: absolute;
bottom: 15%;
left: 0;
right: 0;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 600;
font-style: italic;
color: #222;
text-align: center;
margin: 0;
padding: 0;
}
.category-item.category-active{
background: #FF6347 !important;
}
.category-item.category-active .category-name{
color: #f6f6f6 !important;
}

<div class="menu-categories">
<div onclick="categoryClicked(this)" class="category-item">
<h4 class="category-name">Item</h4>
</div>
<div onclick="categoryClicked(this)" class="category-item">
<h4 class="category-name">Item</h4>
</div>
<div onclick="categoryClicked(this)" class="category-item">
<h4 class="category-name">Item</h4>
</div>
<div onclick="categoryClicked(this)" class="category-item">
<h4 class="category-name">Item</h4>
</div>
<div onclick="categoryClicked(this)" class="category-item">
<h4 class="category-name">Item</h4>
</div>
</div>