2012-03-02 4 views
0

Я использую большой Изотоп и все работает отлично, но теперь я сделаю следующее:JQuery Изотоп - Фильтрация с AND (исключение)

У нас десять данных фильтры, такие как filter1, Filter2, фильтр3, и так далее. Элементы содержат, например, Фильтр1 и Фильтр2. Если я выберу Filter1, этот элемент появится - это нормально. Если я выберу Filter2 (Filter1 ist все еще активен), элемент все еще есть - это тоже нормально. Теперь я выбираю Filter3 (Filter1 и Filter2 все еще активны), и элемент должен быть удален. Это дело не сработало.

Если я активирую Filter3, я получаю все элементы, которые содержат Filter1 ИЛИ Filter2 OR Filter3. Но я хочу только элементы, которые содержат Filter1 AND Filter2 AND Filter3. Все элементы с отсутствующим фильтром (Filter1 или Filter2 или Filter3) должны быть удалены.

Какова наилучшая практика для этого?

Код:

<ul class="project-tags"> 
    <li><a class="all selected" data-filter="all">All</a></li> 
    <li><a class="" title="Filter1" data-filter=".Filter1">Filter1</a></li> 
    <li><a class="" title="Filter2" data-filter=".Filter2">Filter2</a></li> 
    <li><a class="" title="Filter3" data-filter=".Filter3">Filter3</a></li> 
    <li><a class="" title="Filter4" data-filter=".Filter4">Filter4</a></li> 
</ul> 


var $iso = $('#projects'); 

$ iso.isotope ({ animationEngine: '', itemSelector: '.color-формы', кладку: { ColumnWidth: 257, columnHeight: 147 } });

$.filterIsotope = function(filter) 
{ 
    $iso.isotope({ filter:filter }); 
} 

$('.sidebar a').click(function(event){ 
    //$("body,html").animate({scrollTop:125}); 
    // event.preventDefault(); 
    var cat = $(this).attr('data-filter'), 
     $links = $('#work-grid2 .sidebar a:not(.all)'), 
     filter = ""; 
    if (cat == 'all') 
    { 
     $links.removeClass('selected'); 
    } 
    else 
    { 
     $('.sidebar a.all').removeClass('selected'); 
    } 
    $(this).toggleClass('selected'); 
    $links.each(function(index){ 
     if ($(this).hasClass('selected')) 
     { 
      if (filter.length) filter += ", "; 
      filter += $(this).attr('data-filter'); 
     } 
    }); 
    if (filter == "") $('.sidebar a.all').addClass('selected'); 
    $.filterIsotope(filter); 
}) 
+1

Код. Мне нужен код. – Ohgodwhy

ответ

0

Я знаю, что это немного поздно (через пару месяцев, может быть;)), но и для всех остальных:

Поскольку isotope filters просто нормальные селекторы JQuery, чтобы фильтровать элементы, которые имеют 3-х классов (то есть и) вам нужно будет что-то вроде этого:

filter: '.Filter1.Filter2.Filter3' 

В своем коде, насколько я могу сказать (элементы уже было бы хорошо), что будет означать удаление этой линии

if (filter.length) filter += ", "; 
Смежные вопросы