javascript - 带有复选框的 jQuery 过滤器

Question

我有一个网格，需要按 2 个不同的属性进行过滤。位置和语言。

我为每个属性创建了一个检查元素数组，并且需要能够通过这些元素过滤结果。

https://codepen.io/lee-grant/pen/bGWzRYJ?editors=1111

  var filterActive;

    function filterCategory(cat1, cat2) {
        // Create an Array.
        var location = new Array();

        $('.location input[type=checkbox]:checked').each(function () {
            location.push(this.value);
        });

        if (location.length > 0) {
            console.log('Location values: ', location);
        }

        // Create an Array.
        var language = new Array();

        $('.language input[type=checkbox]:checked').each(function () {
            language.push(this.value);
        });

        if (language.length > 0) {
            console.log('Language values: ', language);
        }

        // reset results list
        $('.team-member').removeClass('active');

        // the filtering in action for all criteria
        var selector = '.team-member';
        if ($('.location input').is(':checked')) {
            selector = '[data-location*="' + location + '"]';
        }
        if ($('.language input').is(':checked')) {
            selector = selector + '[data-language*="' + language + '"]';
        }

        //show all results
        $(selector).addClass('active');
    }

    // start by showing all items
    $('.team-member').addClass('active');

    // call the filtering function when selects are changed
    $('.test :checkbox').change(function () {
        filterCategory(
            $('.location :checkbox:checked').val(),
            $('.language :checkbox:checked').val()
        );
    });

在示例中，它一次仅适用于 1 个位置和 1 种语言；任何人都可以建议如何让它在多项选择中正常工作吗？

谢谢

标签： javascriptjquery

Answer 1

一种方法是循环遍历每个数组值，然后像这样添加它：

if ($('.location input').is(':checked')) {
  $.each(location, function(i, x) {
    selector += '[data-location*="' + x + '"]';
  })
}

演示

(function($) {
  'use strict';

  var filterActive;

  function filterCategory(cat1, cat2) {
    // Create an Array.
    var location = new Array();

    $('.location input[type=checkbox]:checked').each(function() {
      location.push(this.value);
    });

    // Create an Array.
    var language = new Array();

    $('.language input[type=checkbox]:checked').each(function() {
      language.push(this.value);
    });

    // reset results list
    $('.team-member').removeClass('active');

    // the filtering in action for all criteria
    var selector = '.team-member';
    if ($('.location input').is(':checked')) {
      $.each(location, function(i, x) {
        selector += '[data-location*="' + x + '"]';
      })
    }
    if ($('.language input').is(':checked')) {
      $.each(language, function(i, x) {
        selector += '[data-language*="' + x + '"]';
      })
    }
    //show all results
    $(selector).addClass('active');
  }

  // start by showing all items
  $('.team-member').addClass('active');

  // call the filtering function when selects are changed
  $('.test :checkbox').change(function() {
    filterCategory(
      $('.location :checkbox:checked').val(),
      $('.language :checkbox:checked').val()
    );
  });

})(jQuery);

.team-wrap {
  margin: 0 -15px;
  display: flex;
  flex-wrap: wrap;
}

.team-wrap .team-member {
  width: 25%;
  padding: 15px;
  opacity: 0;
  display: none;
}

.team-wrap .team-member.active {
  opacity: 1;
  display: block;
}

.team-wrap .team-member header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eeeeee;
}

.team-wrap .team-member header .view {
  font-weight: 500;
  color: #3d3253;
  background-color: #fff;
  border-radius: 30px 30px 30px 30px;
  padding: 13px 25px 13px 25px;
  position: absolute;
  opacity: 0;
  transform: translateY(50px);
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
}

.team-wrap .team-member header:hover .view {
  opacity: 1;
  transform: translateY(0);
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
}

.team-wrap .team-member header .view:hover {
  color: #fff;
  background-color: #3d3253;
}

.team-wrap .team-member header img {
  display: block;
  width: 100%;
}

.team-wrap .team-member .content {
  padding: 20px;
  font-size: 14px;
  background: #e7d8d3;
  text-align: center;
}

.team-wrap .team-member .content h4 {
  color: #3d3253;
  margin: 0 0 10px 0;
  font-size: 20px;
}

.team-wrap .team-member .content p {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  <ul class="location">
    <li><strong>Location:</strong></li>
    <li><input id="brighton" name="brighton" type="checkbox" value="brighton"><label>Brighton (1)</label></li>
    <li><input id="covent-garden" name="covent-garden" type="checkbox" value="covent-garden"><label>Covent Garden (6)</label></li>
    <li><input id="fitzrovia" name="fitzrovia" type="checkbox" value="fitzrovia"><label>Fitzrovia (8)</label></li>
    <li><input id="oxford-circus" name="oxford-circus" type="checkbox" value="oxford-circus"><label>Oxford Circus (12)</label></li>
    <li><input id="soho" name="soho" type="checkbox" value="soho"><label>Soho (6)</label></li>
  </ul>
  <ul class="language">
    <li><strong>Language</strong></li>
    <li><input id="croatian-serbian" name="croatian-serbian" type="checkbox" value="croatian-serbian"><label>Croatian/Serbian (2)</label></li>
    <li><input id="english" name="english" type="checkbox" value="english"><label>English (21)</label></li>
    <li><input id="greek" name="greek" type="checkbox" value="greek"><label>Greek (5)</label></li>
    <li><input id="italian" name="italian" type="checkbox" value="italian"><label>Italian (13)</label></li>
    <li><input id="mandarin" name="mandarin" type="checkbox" value="mandarin"><label>Mandarin (7)</label></li>
  </ul>
</div>

<div class="team-wrap">
  <article class="team-member" data-language="english italian" data-location="covent-garden">
    <div class="content">
      <p>Location: Covent Garden</p>
      <p>Language: English, Italian</p>
    </div>
  </article>
  <article class="team-member" data-language="croatian-serbian english" data-location="oxford-circus">
    <div class="content">
      <p>Location: Oxford Circus</p>
      <p>Language: Croatian/Serbian, English</p>
    </div>
  </article>
  <article class="team-member" data-language="italian" data-location="covent-garden">
    <div class="content">
      <p>Location: Covent Garden</p>
      <p>Language: Italian</p>
    </div>
  </article>
  <article class="team-member active" data-language="english mandarin" data-location="soho">
    <div class="content">
      <p>Location: Soho</p>
      <p>Language: English, Mandarin</p>
    </div>
  </article>
  <article class="team-member" data-language="english" data-location="fitzrovia">
    <div class="content">
      <p>Location: Fitzrovia</p>
      <p>Language: English</p>
    </div>
  </article>
  <article class="team-member" data-language="croatian-serbian greek" data-location="fitzrovia">
    <div class="content">
      <p>Location: Fitzrovia</p>
      <p>Language: Croatian/Serbian, Greek</p>
    </div>
  </article>
  <article class="team-member" data-language="english" data-location="fitzrovia">
    <div class="content">
      <p>Location: Fitzrovia</p>
      <p>Language: English</p>
    </div>
  </article>
  <article class="team-member" data-language="english" data-location="oxford-circus">
    <div class="content">
      <p>Location: Oxford Circus</p>
      <p>Language: English</p>
    </div>
  </article>
  <article class="team-member" data-language="english" data-location="oxford-circus">
    <div class="content">
      <p>Location: Oxford Circus</p>
      <p>Language: English</p>
    </div>
  </article>
  <article class="team-member" data-language="english" data-location="brighton covent-garden">
    <div class="content">
      <p>Location: Brighton, Covent Garden</p>
      <p>Language: English</p>
    </div>
  </article>
</div>