1

Есть блоки, которые динамически подгружаются на страницу, у каждого блока есть своя группа от 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");
    }
});

1 ответ 1

1
$(".group-filter__button").on('click', function() {
   let filter = $(this).text();
   $(".student-card .group-name_js").each(function() {
       if(filter == $(this).text()) {
           $(this).closest(".student-card").css("border", "1px solid red");
       }
   });
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.