2013-07-12 10 views
1

Я использую витринный дисплей, который применяет фильтры к данным в зависимости от категории.Применить фильтр данных на <a>

<nav id="portfolio-filter" class="span12"> 
<ul> 
    <li class="active all"> 
     <a href="#" data-filter="*">View All</a> 
    </li> 
    <li class="other"> 
     <a href="#" data-filter=".cat1">Category 1</a> 
    </li> 
    <li class="other"> 
     <a href="#" data-filter=".cat2">Category 2</a> 
    </li> 
</ul> 

Это выше список нав, который используется, чтобы нажать и применить данные фильтр

Он скрывает дивы в следующем формате

<div class="portfolio-item cat1 v1 isotope-item" style="-webkit-transform: translate(0px, 0px);"> 
<div class="he-wrap tpl2"> 
    <img src="" alt=""> 
    <div class="shape2"></div> 
    <div class="overlay he-view"> 
     <div class="bg a0"> 
      <div class="center-bar v1"> 
       <a href="#" class="link a0"></a> 
       <p class="short_desc">short descript</p> 
      </div> 
     </div>  
    </div> 
</div> 
<div class="project"> 
    <h6 class="helvetica"><a href="#">Title h6</a></h6> 
    <span class="category">Category1</span> 
</div> 

Вот что я пытаюсь сделать с этим. Есть страницы категорий, которые будут и должны ТОЛЬКО отображать категорию своих divs, но когда страница загружается, если есть что-нибудь в этой категории, то она будет отображать каждый элемент, и я хочу, чтобы он этого не делал.

поэтому я удалил первый Li -> Просмотреть все и попытался готов -> click();

но это не сработало, как я себе представлял Какие у меня варианты?

(вот мой второй в ходе подходе скрыть все DIV наготове. вытащить Диву Attr для данных фильтра затем UNHIDE дивы с классами поля данных фильтра?)

любого входа/помощь или комментариев было бы здорово.

----- обновлен

<script type="text/javascript"> 

      $("document").ready(function() { 
       var $cat = $("#portfolio-filter ul li:first-child a").attr('data-filter'); 
       $(".isotope").isotope({ filter: ".cat1" }); 
       if ($cat !='*'){ 
       //$(".v1:not("+$cat+")").css("display","none"); 
       } 
    }); 
    </script> 

он просто не будет применять правильные фильтры ~ это всегда отображает ни когда я добавить фильтр

ответ

0

Вы можете использовать isotope для этого, если бы Вы как только решение jQuery, дайте мне знать.

Кроме того, ваш второй подход - это «скрыть все div в готовности». потяните div attr для фильтра данных, затем отобразите div с классами поля фильтра данных '.

Не забудьте добавить это в свой скрипт, это должно в основном решить вашу проблему.

$('#portfolio-filter a').click(function(e){ 
     e.preventDefault(); 
     $('#portfolio-filter .current').removeClass('current'); 
     $(this).addClass('current'); 

     var selector = $(this).attr('data-filter'); 
     $container.isotope({ 
      filter: selector, 
      animationOptions: { 
       duration: 750, 
       easing: 'linear', 
       queue: false 
      } 
     }); 
     return false; 
    }); 
}); 
+0

хорошо теперь и сказал это .. не заметил, что уже с использованием изотопа ~ угадайте, я посмотрю на их документацию – teemo

0

I wrote this up quickly и, возможно, это вам поможет.

Идея заключается в использовании :notCSS селектор

.showcat1 > .item:not(.cat1) { 
    display: none; 
} 

, а затем просто переключать классы на обертке

+0

Я не буду знать, что будет .cat1, чтобы этот метод не работал. это может быть .randomthings (dyanmic в зависимости от страниц) – teemo

Смежные вопросы