Фильтрация на основе двух условий

Question

У меня есть восемь карт с двумя параметрами на каждом из них. Первый параметр - год (2011, 2012, 2013, 2014), второй - категория (студия, дом, личный, коммерческий). Это выглядит следующим образом:

• Studio 2011
• дом 2012
• Коммерческий 2013
• Персональная 2012
• Студия 2014
• Commercial 2011
• дом 2014
• Личные 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/

Теперь все это кажется простым, но беда приходит, когда я пытаюсь добавить второе условие сортировки, категории.

С одной стороны, я, безусловно, должен сделать то же самое, что и в первом случае, i. е. сделать нужно категории яркими, не нужно было утрачено:

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"); 
} 

Это помогает немного, но я до сих пор не знаю, как я могу добавить оставшиеся карточки с нужной категорией сейчас, чтобы оба условия были выполнены. Итак, как я могу объединить , сортируя предыдущие результаты сортировки и сортировать все предметы?

Fiddle со всеми кнопками: 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

Я предлагаю сохранения выбранной категории и выбранного отрезок времени в переменных:

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");   

});  

Там зиллионы пути, которые ведут к Риму, это не является идеальным, но попытаться избегайте кода if (1) then, if (2) then, if (3) then, etc..... Я разветвил your fiddle and made a working demo.