如何使用数据属性中的两个或多个值过滤（显示/隐藏）

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，则会显示具有产品 1 和产品 2 的 div，因为它们都包含值 option_1 OR option_4。

但是，我希望看到，如果选中选项 1 和选项 4，则仅显示产品 2，因为它包含值 option_1 AND option_4。

这可能吗？任何帮助表示赞赏。

Answer 1

问题在于 (1) 如何决定要显示哪些 .productsBox 元素，以及 (2) 在 .each() 函数中应用 .filter().show()。

相反，您应该通过循环检查项目来创建完整的过滤条件，然后应用过滤器+显示。此外，至少根据您的示例数据，您应该使用 ~= 的“属性包含单词选择器”（documentation）而不是包含选择器*=。前者将确保 option_10 在您的 data-tag 过滤器中被视为与 option_1 不同。

完整的工作 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"]。

然后在检查项的每个循环之外，我们使用checkedFilter 变量调用.filter(checkedFilter).show()。

在这里工作的 CodePen：https://codepen.io/anon/pen/xzZEmd

如果选择选项 1 和 4，则仅出现 Product 2；如果您随后选择选项 3 作为第三个选项，则不会显示任何产品元素，因为没有一个具有 1、3 和 4。如果您选择 1、2 和 3，则仅出现 Product 1，等等。