使用jquery交叉过滤

Question

我似乎无法在几种类型的查询中过滤我的结果，年份和类型：

$('.filter').click(function (e) {
    e.preventDefault();
    var button = $(this),
    year = button.attr('data'),
        str_year = '.' + year;
    if (button.hasClass('active')) {
        button.removeClass('active');
        $(str_year).not(":hidden").hide('fast');

    } else {
        button.addClass('active');
        $(str_year).not(":visible").show('fast');
    }
});

DEMO

Answer 1

尝试

var filter = $(".filter");
filter.click(function(e) {
  e.preventDefault();
  $(this).toggleClass("active");
  filter.map(function(_, el) {
      if ($(el).is(".active")) {
        var year = $(el).attr("data");
        if (!!$("[class^=" + year + "]")) {
          $("[class^=" + year + "]").show(0)
        } else {
          $("[class$=" + year + "]").show(0)
        }
      };
      return $(el).not(".active")
  })
  .each(function(_, el) {
      $("[class*=" + $(el).attr("data") + "]").hide(0)
  });
});

＆＃13;

＆＃13;

var filter = $(".filter");
filter.click(function(e) {
  e.preventDefault();
  $(this).toggleClass("active");
  filter.map(function(_, el) {
      if ($(el).is(".active")) {
        var year = $(el).attr("data");
        if (!!$("[class^=" + year + "]")) {
          $("[class^=" + year + "]").show(0)
        } else {
          $("[class$=" + year + "]").show(0)
        }
      };
      return $(el).not(".active")
  })
  .each(function(_, el) {
      $("[class*=" + $(el).attr("data") + "]").hide(0)
  });
});

＆＃13;

input[type=button] {
  background: #fff;
}
input[type=button].active {
  background: pink;
}
div {
  width: 100%;
  display: inline-block;
  padding: 10px;
  border: 1px solid;
  margin: 10px;
}
.c2009 {
  background: red
}
.c2010 {
  background: green
}
.c2011 {
  background: blue
}
.c2012 {
  background: yellow
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" class="filter active" value="2009" data="c2009" />
<input type="button" class="filter active" value="2010" data="c2010" />
<input type="button" class="filter active" value="2011" data="c2011" />
<input type="button" class="filter active" value="2012" data="c2012" />
<input type="button" class="filter active" value="Science" data="Science" />
<input type="button" class="filter active" value="Codeur" data="Codeur" />
<section id="container">
  <div class="c2009 Science">2009 S</div>
  <div class="c2010 Codeur">2010 C</div>
  <div class="c2011 Science">2011 S</div>
  <div class="c2011 Codeur">2011 C</div>
  <div class="c2010 Science">2010 S</div>
  <div class="c2011 Codeur">2011 C</div>
  <div class="c2009 Science">2009 S</div>
  <div class="c2010 Codeur">2010 C</div>
  <div class="c2009 Codeur">2009 C</div>
  <div class="c2011 Codeur">2011 C</div>
  <div class="c2009 Science">2009 S</div>
  <div class="c2012 Codeur">2012 C</div>
  <div class="c2009 Codeur">2009 C</div>
  <div class="c2009 Science">2009 S</div>
  <div class="c2012 Science">2012 S</div>
  <div class="c2009 Codeur">2009 C</div>
</section>

＆＃13;

＆＃13;

＆＃13;