javascript - 将过滤器 AND 替换为 OR

Question

我使用此代码来过滤用户选择的选项。 此代码通过 AND 过滤元素，但我需要将其更改为 OR

工作示例:http://jsfiddle.net/nJUb3/1/

$('.flowers-wrap,.planets-wrap').delegate('input[type=checkbox]', 'change', function() {
  var $lis = $('.flowers > div'),
      $checked = $('input:checked');

  if ($checked.length) {
    var selector = '';

    $($checked).each(function(index, element) {
      selector += "[data-category~='" + element.id + "']";
    });

    $lis.hide();
    $('.flowers > div').filter(selector).show();
  } else {
    $lis.show();
  }
});

Answer 1

要使其成为或选择器，您需要用逗号分隔每个属性选择器。因此，您可以使用 map() 构建一个字符串数组，然后在使用它们之前将它们join() 在一起。

另请注意，delegate() 很久以前就被弃用了。您应该改用 on()。

var $flowers = $('.flowers > div');

$('.flowers-wrap, .planets-wrap').on('change', 'input[type=checkbox]', function() {
  var $checked = $('input:checked');
  if ($checked.length) {
    var selector = $checked.map(function(index, element) {
      return "[data-category~='" + element.id + "']";
    }).get().join(',');
    $flowers.hide().filter(selector).show();
  } else {
    $flowers.show();
  }
});

body {
  font-family: 'Arial';
  color: #646464;
}

.planets-wrap {
  float: left;
  width: 20%;
  margin: 0 5% 0 0;
  padding: 0;
  font-size: 12px;
}

.flowers-wrap {
  float: left;
  width: 20%;
  margin: 0 5% 0 0;
  padding: 0;
  position: relative;
}

h3 {
  font-size: 14px;
  font-weight: normal;
}

.flowers-wrap p,
.flowers-wrap label {
  font-size: 12px;
}

.flowers {
  float: left;
  width: 50%;
}

.flowers div {
  float: left;
  width: 90%;
  height: 68px;
  line-height: 68px;
  padding: 0 5%;
  background: #eee;
  margin: 0 0 1px;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="flowers-wrap">
  <h3>Available Flowers</h3>
  <p><strong>Filter flowers by colour:</strong></p>
  <label><input type="checkbox" id="red" /> Red</label><br>
  <label><input type="checkbox" id="yellow" /> Yellow</label><br>
  <label><input type="checkbox" id="purple" /> Purple</label><br>
  <label><input type="checkbox" id="other" /> Other</label>

  <p><strong>Filter flowers by size:</strong></p>
  <label><input type="checkbox" id="small" /> Small</label><br>
  <label><input type="checkbox" id="medium" /> Medium</label><br>
  <label><input type="checkbox" id="large" /> Large</label>
</div>

<div class="planets-wrap">
  <h3>Available Planets</h3>
  <div class="planets">
    <div>Mars <input type="checkbox" id="mars" /></div>
    <div>Venus <input type="checkbox" id="venus" /></div>
    <div>Earth <input type="checkbox" id="earth" /></div>
    <div>Jupiter <input type="checkbox" id="jupiter" /></div>
    <div>Saturn <input type="checkbox" id="saturn" /></div>
    <div>Mercury <input type="checkbox" id="mercury" /></div>
  </div>
</div>
<div class="flowers">
  <div class="flower" data-id="stench-blossom" data-category="red yellow other large mars">Stench Blossom</div>
  <div class="flower" data-id="curd-turler" data-category="purple yellow medium jupiter">Curd Turler</div>
  <div class="flower" data-id="daisy" data-category="yellow other small earth">Daisy</div>
  <div class="flower" data-id="wizards-sleeve" data-category="purple small venus">Wizards Sleeve</div>
  <div class="flower" data-id="rose" data-category="red other medium earth">Rose</div>
</div>