时间戳

首页 > 解决方案 > 如何使用数据属性中的两个或多个值过滤（显示/隐藏）

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

问题描述

我有以下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 或 option_4。

但是，我想看看如果选项 1 和选项 4 被选中，则只显示产品 2，因为它包含值 option_1和option_4。

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

标签： javascriptjqueryfilter

解决方案

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

相反，您应该通过循环检查项目来创建完整的过滤条件，然后应用过滤器+显示。此外，至少根据您的示例数据，您应该使用“属性包含单词选择器”（文档）而~=不是包含选择器*=。前者将确保在您的过滤器中option_10被视为不同。option_1data-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()usingcheckedFilter变量。

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

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

推荐阅读