Question

我有八张牌，每张牌都有两个参数。第一个参数是年（2011年，2012年，2013年，2014年），第二个参数是类别（工作室，房屋，个人，商业）。它看起来像这样：

Studio 2011
House 2012
Commercial 2013
Personal 2012
Studio 2014
Commercial 2011
House 2014
Personal 2013

我需要对它们进行分类，使所需的卡片变亮，而不需要褪色。默认情况下，所有这些都很明亮。 HTML：

<div class="card card-studio card-2011 card-bright">Studio 2011</div>
<div class="card card-house card-2012 card-bright">House 2012</div>
<div class="card card-commercial card-2013 card-bright">Commercial 2013</div>
<div class="card card-personal card-2012 card-bright">Personal 2012</div>
<div class="card card-studio card-2014 card-bright">Studio 2014</div>
<div class="card card-commercial card-2011 card-bright">Commercial 2011</div>
<div class="card card-house card-2014 card-bright">House 2014 </div>
<div class="card card-personal card-2013 card-bright">Personal 2013</div>

我添加按钮多年：

<a href="#" class="button button-2011">2011</a>
<a href="#" class="button button-2012">2012</a>
<a href="#" class="button button-2013">2013</a>
<a href="#" class="button button-2014">2014</a>

当用户点击年份按钮时，我们会带上所需年级的卡片并删除他们的“明亮/褪色”课程以防万一。然后我们为这些卡添加“明亮”类。然后我们拿出所有没有必要年份的卡片并添加“褪色”课程（以防万一也删除以前的课程）。我们还将按钮加下划线，其兄弟姐妹没有加下划线。这一切看起来像这样：

$(".button").on("click", function(event){
    event.preventDefault();

    if($(this).hasClass("button-2011")){
        $(".card-2011").removeClass("card-bright card-faded").addClass("card-bright");
        $(".card").not(".card-2011").removeClass("card-bright card-faded").addClass("card-faded");
        $(this).siblings().removeClass("button-active").end().addClass("button-active");
}

JSfiddle：https://jsfiddle.net/6vLzyowc/

现在一切看起来很简单，但是当我尝试添加第二个排序条件类别时出现问题。

一方面，我当然需要做同样的事情，就像第一种情况一样，我。即使所需类别明亮，不需要褪色：

if($(this).hasClass("button-house")){
        $(".card-house").removeClass("card-bright card-faded").addClass("card-bright");
        $(".card").not(".card-house").removeClass("card-bright card-faded").addClass("card-faded");
}

但它会使所有类型的卡片变得“明亮”，而且我也有前一年的排序结果。看来我需要先把它们整理出来。因此，我采用第一年的排序结果（即“明亮的”卡片）并制作不需要的类别“褪色”：

if($(this).hasClass("button-house")){
        $(".card-bright").not("card-house").addClass("card-faded");
}

它有点帮助，但我现在仍然不知道如何添加所需类别的剩余卡片，以便满足这两个条件。那么，我如何结合排序以前的排序结果和排序所有项目？

摆弄所有按钮：https://jsfiddle.net/hm1emr8p/

Answer 1

我认为你的方法有点过于复杂。以下适用于任意数量的过滤器。诀窍是保持所选内容的状态，并且在任何更改时只需将此状态重新应用于卡元素。

(function () {
  var active = [];

  $('.filter').each(function (idx, el) {
    var $el = $(el);

    active.push('');

    $el.on('click', '.button', function () {
      var $this = $(this);

      active[idx] = $this.data('toggle');

      $el.find('.button').removeClass('button-active');
      $this.addClass('button-active');

      update();
    });
  });

  function update()
  {
    var a = active.join('');

    if (a.length === 0) {
      $('.card').removeClass('card-faded');
    }
    else {
      $('.card').addClass('card-faded').filter(active.join('')).removeClass('card-faded');
    }
  }
})();

a {
  text-decoration: none;
  color: black;
}

.buttons {
  margin-top: 40px;
}

.time {
  margin-bottom: 20px;
}

.card-faded {
  opacity: 0.3;
}

.button-active {
  text-decoration: underline;
}

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<div class="card card-2011 card-studio">Studio 2011</div>
<div class="card card-2012 card-house">House 2012</div>
<div class="card card-2013 card-commercial">Commercial 2013</div>
<div class="card card-2012 card-personal">Personal 2012</div>
<div class="card card-2014 card-studio">Studio 2014</div>
<div class="card card-2011 card-commercial">Commercial 2011</div>
<div class="card card-2014 card-house">House 2014 </div>
<div class="card card-2013 card-personal">Personal 2013</div>

<div class="buttons">
  <div class="filter time">
    <a class="button button-2011" data-toggle=".card-2011">2011</a>
    <a class="button button-2012" data-toggle=".card-2012">2012</a>
    <a class="button button-2013" data-toggle=".card-2013">2013</a>
    <a class="button button-2014" data-toggle=".card-2014">2014</a>
    <a class="button button-all button-active" data-toggle="">All time</a>
  </div>

  <div class="filter category">
    <a class="button button-studio" data-toggle=".card-studio">Studio</a>
    <a class="button button-house" data-toggle=".card-house">House</a>
    <a class="button button-commercial" data-toggle=".card-commercial">Commercial</a>
    <a class="button button-personal" data-toggle=".card-personal">Personal</a>
    <a class="button button-all button-active" data-toggle="">All</a>
  </div>
</div>

Answer 2

我建议将所选类别和所选时间跨度保存在变量中：

Schedule the Workflow

在您的情况下，您可以使用var lastCategory = ''; var lastYear = '';属性来存储以下信息：

data-

和

<a href="#" data-year="2011" class="button button-2011">2011</a>

并根据<a href="#" data-cat="studio" class="button button-studio">Studio</a>处理程序中数据元素的值执行操作：

click

导致罗马的方式很多，这不太理想，但试图避免使用$(".category > .button").on("click", function(event){ event.preventDefault(); var tmpCat = $(this).data('cat'); lastCategory = tmpCat; $(".card").removeClass("card-faded"); if (tmpCat == 'all') { if (lastYear == 'alltime') { $(".card").addClass("card-faded"); } else { $(".card-"+lastYear).addClass("card-faded"); } } else { if (lastYear == 'alltime') { $(".card-" + tmpCat).addClass("card-faded"); } else { $(".card-" + tmpCat + ".card-"+lastYear).addClass("card-faded"); } } $(this).siblings() .removeClass("button-active") .end() .addClass("button-active"); }); $(".time > .button").on("click", function(event){ event.preventDefault(); var tmpYear = $(this).data('year'); lastYear = tmpYear; $(".card").removeClass("card-faded"); if (tmpYear == 'alltime') { if (lastCategory == 'all') { $(".card").addClass("card-faded"); } else { $(".card-" + lastCategory).addClass("card-faded"); } } else { if (lastCategory == 'all') { $(".card-" + tmpYear).addClass("card-faded"); } else { $(".card-" + lastCategory + ".card-"+tmpYear).addClass("card-faded"); } } $(this).siblings() .removeClass("button-active") .end() .addClass("button-active"); });代码。我分叉your fiddle and made a working demo。

根据两个条件进行过滤

2 个答案: