Показывать div динамически, если установлен соответствующий флажок

Question

Я пытаюсь создать фильтр с jQuery и флажками. Например, когда пользователь нажимает на флажок 2013, он просто отображает div с тем же class и скрывает другие.

Однако это не работает. Кто-нибудь знает, как заставить это работать? Спасибо

$('.result').hide();

$(".filters :checkbox").click(function() {
  if ($(this).prop("checked") == true) {
    var id = $(this).attr('id');
    $('.result .' + id + '').slideToggle('slow');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filters">
  <input type="checkbox" id="2013" name="2013"><label for="2013">2013</label>
  <input type="checkbox" id="2014" name="2014"><label for="2014">2014</label>
  <input type="checkbox" id="2014" name="2015"><label for="2015">2015</label>
</div>
<div class="results">
  <div class="result 2013">my text</div>
  <div class="result 2014">my text</div>
  <div class="result 2015">my text</div>
</div>

Answer 1

Здесь есть несколько проблем:

• Вы должны скрыть элементы .result, используя CSS, чтобы избежать FOU C
• Добавить атрибут value для флажков, чтобы сохранить HTML действительным. Вы можете использовать это вместо id в вашей JS logi c. Кроме того, дать им все то же самое name. Хотя вы не обязательно можете использовать его здесь, это все же лучше практиковать и больше semanti c.
• Использовать событие change, а не click, при работе с флажками и радиовходами. Это значит, что ваш код по-прежнему работает для тех, кто использует клавиатуру.
• Нет необходимости в == true при оценке логических значений.
• Нет необходимости объединять '' в конце строка.

Однако основные проблемы заключаются в том, что у вас есть пробел в строке селектора, которую вы строите; $('.result .' + id) должно быть $('.result.' + id). Кроме того, вам необходимо снова скрыть снятые флажки, что можно сделать с помощью filter() и slideUp.

После всего сказанного попробуйте это:

let $results = $('.result');
let $filters = $(".filters :checkbox").change(function() {
  $results.slideUp('slow');
  $filters.filter(':checked').each(function() {
    $results.filter('.' + this.value).stop().slideDown('slow');
  })
});

.result {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filters">
  <label>
    <input type="checkbox" name="year" value="2013">
    2013
  </label>
  <label>
    <input type="checkbox" name="year" value="2014">
    2014
  </label>
  <label>
    <input type="checkbox" name="year" value="2015">
    2015
  </label>
</div>
<div class="results">
  <div class="result 2013">Result 2013</div>
  <div class="result 2014">Result 2014</div>
  <div class="result 2015">Result 2015</div>
</div>

Наконец, обратите внимание, что я установил флажки внутри элементов label. Это увеличивает область попадания, на которую вы можете нажать, чтобы установить флажок, а также устраняет необходимость в атрибуте for.