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或option_4。

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

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

Answer 1

问题是（1）您如何决定显示哪些.productsBox元素，以及（2）您在.filter().show()内应用.each()功能

相反，您应该通过循环检查项目来创建完整的过滤条件，然后应用过滤器+ show。此外，至少根据您的示例数据，您应该使用＆＃34;属性包含字选择器＆＃34; （documentation）~=而不是包含选择器*=。前者将确保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＆amp; 4，仅出现Product 2;如果您随后选择第3个选项选项3，则不显示任何产品元素，因为没有产品元素具有1,3和＆amp; 3。 4.如果你选择1，2＆amp; 3，只显示Product 1等。

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

1 个答案: