заменить фильтр И на ИЛИ

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

Чтобы сделать это селектором or, вам нужно разделить каждый селектор атрибута запятой.Таким образом, вы можете использовать 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>

Answer 2

В вашем коде скрипта js замените ваш строковый селектор на таблицу var selector = [];

и добавьте к нему элементы вроде так: selector.push ("[data-category ~ = '" +element.id + "']");

Затем выполните итерации по нему: selector.forEach (sel => {$ ('. flowers> div '). filter (sel) .show ();});