Переключите видимость нескольких подразделений с несколькими классами, используя флажки, которые представляют каждый класс

Question

Это моя первая публикация здесь, и я не слишком опытен ...

Есть много похожих вопросов, спрашивающих, как показать / скрыть div, основываясь на селекторах флажков;меня бросает то, что у меня есть div с несколькими классами, и если какой-либо из этих классов имеет соответствующие флажки, я хочу, чтобы div показывал.

Например, допустим, я хочу, чтобы на странице отображались все фильмы, которыесоответствуют флажкам, которые были выбраны для ряда актеров. В отдельном фильме может быть несколько актеров, и я хочу, чтобы все фильмы показывались, если выбран хотя бы один актер. До сих пор мой подход заключался в следующем:

1. Поместить каждый фильм в отдельный div
2. Добавить имя актера в качестве класса для каждого фильма div
3. Создать флажокдля каждого субъекта со значением, соответствующим соответствующему классу div:
4. Установите для каждого класса div отображение no *
5. Используйте JQuery, чтобы показать div, если он все еще скрыт

Сначала я пытался добиться этого с помощью функции toggle (), но столкнулся с проблемой отображения: изменение состояния, если были выбраны два актера из одного фильма.

Далее я просто попытался написать код:

if ($("." + inputValue).is(':hidden')){
$("." + inputValue).show()};

Чтобы решить проблему с установкой флажка и снятием флажка с сохранением фильма, я добавил инструкцию else, чтобы скрыть элемент, если он уже отображается ... но теперь у меня возникла та же проблема, что и у меня. с toggle ()

Я добавил код ниже - если вы выберете Брэда Питта или Анджелину Джоли, вы увидите экран «Мистер и миссис Смит». Проблема в том, что если вы выберете другого актера / актрису, он снова исчезнет. Возможно, я ошибаюсь, но похоже, что изменение свойства display для класса div изменяет свойство для всех других классов, прикрепленных к этому div (что имеет смысл, поскольку это позволит избежать коллизий)

Это единственное исправление здесьесть идентификатор для каждого фильма и вместо этого проверить, если фильм уже показывает? (У меня много фильмов и не так много актеров, так что это привело бы к большему количеству CSS-кода)

.BradPitt {
  display: none
}

.AngelinaJolie {
  display: none
  }

<div>
<label><input type="checkbox" name="actorCheckbox" value="BradPitt"> Brad Pitt </label>
<label><input type="checkbox" name="actorCheckbox" value="AngelinaJolie"> Angelina Jolie </label>
</div>

<div class = "BradPitt AngelinaJolie">Mr and Mrs Smith</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){

  var showElements = function() {

        var inputValue = $(this).attr("value");
        
        if ($("." + inputValue).is(':hidden')){
        $("." + inputValue).show()
      }else{
        $("." + inputValue).hide()
        };


  }

  $( "input[type=checkbox]" ).on( "click", showElements );  
});
</script>

Answer 1

Чтобы все заработало, я бы предложил сделать несколько небольших изменений:

$(document).ready(function() {
  var showElements = function() {
    var inputValue = []
    $("input[type=checkbox]:checked").each(function() {
      inputValue.push($(this).val())
    })
    $('.movie').hide();
    $('.movie').filter(function() {
      for (var i = 0; i < inputValue.length; i++) {
        if ($(this).hasClass(inputValue[i])) {
          return $(this)
        }
      }
    }).show();
  }
  $("input[type=checkbox]").on("click", showElements);
});

Я также добавил класс movie в <div class = "BradPitt AngelinaJolie">Mr and Mrs Smith</div>

Демо

$(document).ready(function() {
  var showElements = function() {
    var inputValue = []
    $("input[type=checkbox]:checked").each(function() {
      inputValue.push($(this).val())
    })
    $('.movie').hide();
    $('.movie').filter(function() {
      for (var i = 0; i < inputValue.length; i++) {
        if ($(this).hasClass(inputValue[i])) {
          return $(this)
        }
      }
    }).show();
  }
  $("input[type=checkbox]").on("click", showElements);
});

.BradPitt {
  display: none
}

.AngelinaJolie {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label><input type="checkbox" name="actorCheckbox" value="BradPitt"> Brad Pitt </label>
  <label><input type="checkbox" name="actorCheckbox" value="AngelinaJolie"> Angelina Jolie </label>
</div>

<div class="movie BradPitt AngelinaJolie">Mr and Mrs Smith</div>
<div class="movie BradPitt">Troy</div>

Answer 2

Я думаю, что это проще всего, если сначала всегда скрывать все фильмы, а затем снова показывать те, которые соответствуют значению одного из отмеченных флажков. Это избавляет вас от необходимости иметь дело с «конфликтующими» состояниями флажков.

.movie {
  display: none;
}

<div>
  <label><input type="checkbox" name="actorCheckbox" value="BradPitt"> Brad Pitt </label>
  <label><input type="checkbox" name="actorCheckbox" value="AngelinaJolie"> Angelina Jolie </label>
</div>

<div class="movie BradPitt AngelinaJolie">Mr and Mrs Smith</div>
<div class="movie BradPitt">Something with only Pitt in it</div>
<div class="movie AngelinaJolie">Something with only Angelina in it</div>
<div class="movie Joker">Something with clowns</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
  $(document).ready(function() {

    var showElements = function() {
      $('.movie').hide(); // hide all .movie elements

      $('input[name=actorCheckbox]:checked').each(function() {
        $('.movie.' + $(this).val()).show();
      });
    }

    $("input[type=checkbox]").on("change", showElements);
  });
</script>