Есть блоки, которые динамически подгружаются на страницу, у каждого блока есть своя группа от 1 до 3. Есть соответственно 3 кнопки, которые отвечают за группы от 1 до 3. При нажатии на кнопку (например "группа 1"), блок содержащий группу 1 должен исчезнуть (для тестов я меняю ему цвет бордера), а остальные блоки остаться. При нажатии кнопки группа 2 блок с группой 2 исчезает и так далее. Не могу реализовать данный функционал.
$(".group-filter__button").on('click', function(){
let filter = $(this).text();
let $cards = $(".student-card");
let $groupsName = $(".group-name_js").text();
$($groupsName).each(function (){
if(filter == $(this)) {
$(this).css("border", "1px solid red");
}
});
});
.flex {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.student-card {
width: 150px;
border: 1px solid black;
}
.group-filter {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 20px;
margin-bottom: 20px;
}
.group-filter__button {
width: 100px;
height:30px;
background: #b2e4fb;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
text-transform: uppercase;
font-family: "Roboto Light";
border-radius: 3px;
cursor: pointer;
}
.group-filter__button:hover {
background: #0187d0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "group-filter">
<div class = "group-filter__button group-filter__one">Группа 1</div>
<div class = "group-filter__button group-filter__two">Группа 2</div>
<div class = "group-filter__button group-filter__three">Группа 3</div>
</div>
<div class = "flex">
<div class = "student-card">
<div class = "student-card__group">Группа: <span class = "group-name_js">Группа 1</span></div>
<div class = "student-card__student">Ученик: Ученик 1</div>
<div class = "student-card__message">Сообщение: текст</div>
<div class = "student-carg__img"><img alt = ""></div>
</div>
<div class = "student-card">
<div class = "student-card__group">Группа: <span class = "group-name_js">Группа 2</span></div>
<div class = "student-card__student">Ученик: Ученик 1</div>
<div class = "student-card__message">Сообщение: текст</div>
<div class = "student-carg__img"><img alt = ""></div>
</div>
<div class = "student-card">
<div class = "student-card__group">Группа: <span class = "group-name_js">Группа 3</span></div>
<div class = "student-card__student">Ученик: Ученик 1</div>
<div class = "student-card__message">Сообщение: текст</div>
<div class = "student-carg__img"><img alt = ""></div>
</div>
</div>
Или вот такой вариант javascript
let test = "";
$(".student-card").each(function(){
$(".group-filter__button").on('click', function(){
test = $(this).text();
});
let work = $(this).find('.group-name_js').text();
if (work == test) {
$(this).css("border", "red 1px solid");
}
});