Как отфильтровать (показать / скрыть) два или более значений в атрибуте данных

Question

У меня есть следующий html:

<input id="check_1" type="checkbox" name="check" value="option_1">
<label for="check_1">Option 1</label>

<input id="check_2" type="checkbox" name="check" value="option_2">
<label for="check_2">Option 2</label>

<input id="check_3" type="checkbox" name="check" value="option_3">
<label for="check_3">Option 3</label>

<input id="check_4" type="checkbox" name="check" value="option_4">
<label for="check_4">Option 4</label>

<div class="productsBox" data-tag="option_1 option_2 option_3">Product 1</div>

<div class="productsBox" data-tag="option_1 option_4">Product 2</div>

И следующий javascript:

<script>
        window.onload=function(){
        $('input').on('change', function () {
          var $checked = $('input:checked');
          if ($checked.length) {
            $('.productsBox').hide();
            $checked.each(function () {
              var val = $(this).val();
                $('.productsBox').filter('[data-tag*="'+val+'"]').show();
            });
          } else {
            $('.productsBox').show();
          }
        });
        }
</script>

Итак, если проверены вариант 1 и вариант 4, div с продуктом 1 ипоказан продукт 2, поскольку они оба содержат значения option_1 ИЛИ option_4.

Однако я хотел бы видеть, что если проверены вариант 1 и вариант 4, отображается только продукт 2, поскольку он содержит значения option_1 AND option_4.

Возможно ли это?Любая помощь приветствуется.

Answer 1

Проблема заключается в (1) в том, как вы решаете, какие .productsBox элементы отображать, и (2) в том, что вы применяете .filter().show() внутри своей функции .each().

Вместо этого,Вы должны создать полное условие фильтра, просматривая отмеченные элементы: , затем применить фильтр + шоу.Кроме того, по крайней мере, основываясь на данных вашего примера, вы должны использовать «Атрибут содержит селектор слов» ( документация ), который равен ~= вместо селектора содержит *=.Первый из них гарантирует, что option_10 будет отличаться от option_1 в вашем фильтре data-tag.

Полный рабочий JS:

$(function() {
  $("input").on("change", function() {
    var $checked = $("input:checked");
    var $checkedFilter = '';
    if ($checked.length) {
      $(".productsBox").hide();
      $checked.each(function() {
        $checkedFilter = $checkedFilter + '[data-tag~="' + $(this).val() + '"]';        
      });
      $(".productsBox").filter($checkedFilter).show();
    } else {
      $(".productsBox").show();
    }
  });
});

Вы можете видеть, что я создаю новую строкупеременная заранее называется checkedFilter;Здесь мы создадим динамический фильтр, для которого нужно показать .productsBox элементов.Затем, перебирая отмеченные флажки, мы строим полный фильтр на основе этих элементов.В примере проверяемых Option 1 и Option 4 значение checkedFilter равно: [data-tag~="option_1"][data-tag~="option_4"].

Затем вне каждого цикла проверяемых элементов мы вызываем .filter(checkedFilter).show(), используя checkedFilter переменная.

Рабочий CodePen здесь: https://codepen.io/anon/pen/xzZEmd

Если вы выбираете Опции 1 и 4, появляется только Product 2;если затем выбрать в качестве третьего варианта вариант 3, элементы продукта не отображаются, поскольку ни один из них не имеет 1, 3 и 4. При выборе 1, 2 и 3 отображается только Product 1 и т. д.