Question

我需要使用multiselct，data属性进行过滤。它工作但不如预期

这是我的代码

<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>

这是我的剧本

<script>
$('.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();
  })
});
</script>

如果我从每个过滤器中选择任何一个，它工作正常，但是当我从相同的过滤器中选择时，它应该执行逻辑OR，但它正在执行逻辑AND。

以下是fiddler lik

Answer 1

我正在努力解决与 durai 相同的问题。我更新了the fiddle，请按照页面顶部的说明进行选择，您将看到有问题的案例。

<ul class="list">
<li data-at="foo" data-st="1" data-dpt="a">asdw</li>
<li data-at="boo" data-st="3" 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="a">this should be visible (when filters: 3 | bar | a&b)</li>
<li data-at="bar" data-st="2" 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="bar" data-st="3" data-dpt="b">this should be visible (when filters: 3 | bar | a&b)</li>

多选过滤器中的问题

1 个答案: