使用带有数据属性的jquery进行多重过滤

Question

我需要使用data属性使用多个过滤器。它是组合工作但不是单独工作。这是我的代码：

<ul>
    <li>
        <div class="sts">
            <h1>filter 1</h1>
            </h1>
            <div class="checkbox">
                <label>
                    <input data-id="1" class="st" type="checkbox" />
                    1
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input data-id="2" class="st" type="checkbox" />
                    2
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input data-id="3" class="st" type="checkbox" />
                    3
                </label>
            </div>
        </div>
    </li>
    <li>
        <h1>filter 2</h1>
        <div class="ats">
            <div class="checkbox">
                <label>
                    <input data-id="foo" class="at" type="checkbox" />
                    foo
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input data-id="boo" class="at" type="checkbox" />
                    boo
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input data-id="bar" class="at" type="checkbox" />
                    bar
                </label>
            </div>
        </div>
    </li>
    <li>
        <h1>filter 3</h1>
        <div class="dpts">
            <div class="checkbox">
                <label>
                    <input data-id="a" class="dpt" type="checkbox" />
                    a
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input data-id="b" class="dpt" type="checkbox" />
                    b
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input data-id="c" class="dpt" type="checkbox" />
                    c
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input data-id="d" class="dpt" type="checkbox" />
                    d
                </label>
            </div>
        </div>
    </li>
</ul>

<ul class="list">
    <li data-a="foo" data-st="1" data-dpt="a">asdw</li>
    <li data-a="boo" data-st="2" data-dpt="c">qwedf</li>
    <li data-a="boo" data-st="1" data-dpt="a">qwedf</li>
    <li data-a="bar" data-st="3" data-dpt="b">tazxsw</li>
    <li data-a="bar" data-st="1" data-dpt="b">zxcvb</li>
    <li data-a="foo" data-st="1" data-dpt="b">poiuy</li>
    <li data-a="boo" data-st="2" data-dpt="d">lkjhg</li>
    <li data-a="boo" data-st="3" data-dpt="d">lkjhg</li>
</ul>

$(function() {
    $('.at, .dpt,.st').on('click', function() {
        var checkedat = $('.at:checked');
        var checkeddept = $('.dpt:checked');
        var checkedst = $('.st:checked');
        if (checkedat.length || checkeddept.length || checkedst.length) {
            if (checkeddept.length === 0) {
                $('.list > li').hide();
                $.each(checkedat, function() {
                    var prdId = $(this).attr('data-id');
                    $.each(checkedst, function() {
                        var brandId = $(this).attr('data-id');
                        $('.list > li[data-a="' + prdId + '"][data-st="' + brandId + '"]').show();
                    });
                });
            } else if (checkedat.length === 0) {
                $('.list > li').hide();
                $.each(checkedst, function() {
                    var brandId = $(this).attr('data-id');
                    $.each(checkeddept, function() {
                        var DeptId = $(this).attr('data-id');
                        $('.list > li[data-st="' + brandId + '"][data-dpt="' + DeptId + '"]').show();
                    });
                });
            } else if (checkedat.length === 0) {
                $('.list > li').hide();
                $.each(checkeddept, function() {
                    var DeptId = $(this).attr('data-id');
                    $.each(checkedst, function() {
                        var brandId = $(this).attr('data-id');
                        $('.list > li[data-dpt="' + DeptId + '"][data-st="' + brandId + '"]').show();
                    });
                });
            } else {
                $('.list > li').hide();
                $.each(checkedat, function() {
                    var prdId = $(this).attr('data-id');
                    $.each(checkedst, function() {
                        var brandId = $(this).attr('data-id');
                        $.each(checkeddept, function() {
                            var DeptId = $(this).attr('data-id');
                            $('.list > li[data-a="' + prdId + '"][data-dpt="' + DeptId + '"][data-st="' + brandId + '"]').show();
                        });
                    });
                });

            }
        } else {
            $('.list > li').show();
        }
    });
});

这是jsFiddle link

如果我检查过滤器1和过滤器中的任何选项过滤器2＆amp;过滤3它的工作，但是当我点击过滤器1或过滤器2中的任何选项时它不起作用

Answer 1

你的逻辑很多比它需要的更复杂。你应该考虑使用DRY原则，因为你可以更简单。

首先，在所有复选框上放置一个公共类（我在我的示例中使用了.stat）。然后使用data属性表示stat的类型。在那里，您可以循环浏览每个已检查的统计信息，并使用li隐藏/显示相关的filter()，以便根据data-stat和data-id进行匹配。像这样：

$('.stat').on('click', function() {
  var $stats = $('.stat:checked');
  var $items = $('.list li');

  $items.show();
  if ($stats.length == 0)
    return;

  $stats.each(function() {
    var $stat = $(this);
    $items.filter(function() {
      return $(this).data($stat.data('type')) != $stat.data('id');
    }).hide();
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="sts">
      <h1>filter 1</h1>
      <div class="checkbox">
        <label>
          <input data-id="1" data-type="st" class="stat st" type="checkbox" />1
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="2" data-type="st" class="stat st" type="checkbox" />2
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="3" data-type="st" class="stat st" type="checkbox" />3
        </label>
      </div>
    </div>
  </li>
  <li>
    <h1>filter 2</h1>
    <div class="ats">
      <div class="checkbox">
        <label>
          <input data-id="foo" data-type="at" class="stat at" type="checkbox" />foo
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="boo" data-type="at" class="stat at" type="checkbox" />boo
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="bar" data-type="at" class="stat at" type="checkbox" />bar
        </label>
      </div>
    </div>
  </li>
  <li>
    <h1>filter 3</h1>
    <div class="dpts">
      <div class="checkbox">
        <label>
          <input data-id="a" data-type="dpt" class="stat dpt" type="checkbox" />a
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="b" data-type="dpt" class="stat dpt" type="checkbox" />b
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="c" data-type="dpt" class="stat dpt" type="checkbox" />c
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="d" data-type="dpt" class="stat dpt" type="checkbox" />d
        </label>
      </div>
    </div>
  </li>
</ul>

<ul class="list">
  <li data-at="foo" data-st="1" data-dpt="a">asdw</li>
  <li data-at="boo" data-st="2" data-dpt="c">qwedf</li>
  <li data-at="boo" data-st="1" data-dpt="a">qwedf</li>
  <li data-at="bar" data-st="3" data-dpt="b">tazxsw</li>
  <li data-at="bar" data-st="1" data-dpt="b">zxcvb</li>
  <li data-at="foo" data-st="1" data-dpt="b">poiuy</li>
  <li data-at="boo" data-st="2" data-dpt="d">lkjhg</li>
  <li data-at="boo" data-st="3" data-dpt="d">lkjhg</li>
</ul>

以上是对每个选择的选项执行'AND'逻辑。要将其更改为“或”，请使用以下内容：

$('.stat').on('click', function() {
  var $stats = $('.stat:checked');
  var $items = $('.list li');

  if ($stats.length == 0) {
    $items.show();
    return;
  }

  $items.hide();
  $stats.each(function() {
    var $stat = $(this);
    $items.filter(function() {
      return $(this).data($stat.data('type')) == $stat.data('id');
    }).show();
  })
});