2013-05-28 3 views
0

У меня есть этот скрипт, который очень хорошо фильтрует мои продукты. Но теперь у меня есть некоторые продукты, которые являются частью двух разных категорий, и я должен перечислить их на обоих. Что мне нужно реализовать?фильтрация нескольких элементов данными-cat

<script type="text/javascript"> 
    $(document).ready(function() { 
     var Portfolio = { 
      sort: function(items) { 
       items.show(); 
       $('#produtos-content').find('div.portfolio-item').not(items).fadeOut(500); 
      }, 
      showAll: function(items) { 
       items.fadeIn(500); 
      }, 
      doSort: function() { 
       $('a', '#produtos-sort').on('click', function(e) { 
        e.preventDefault(); 
        var $a = $(this); 
        if (!$a.is('#all')) { 
         var items = $('div[data-cat=' + $a.data('cat') + ']', '#produtos-content'); 
         Portfolio.sort(items); 
        } else { 
         Portfolio.showAll($('div.portfolio-item', '#produtos-content')); 
        } 
       }); 
      } 
     }; 
     Portfolio.doSort();  
    }); 
</script> 

мой HTML:

Сортируемые Кнопки:

<div id="produtos-sort"> 
    <a href="#" id="all">ALL</a> 
    <a href="#" data-cat="cat_1">TABLET</a> 
    <a href="#" data-cat="cat_2">CELLPHONES</a> 
    <a href="#" data-cat="cat_1 cat_2">ANDROID</a> 
</div> 

И Дисплей:

<div class="portfolio-item" data-cat="cat_1"> 
    <a href="produtos/grande/big_image.jpg" title="TABLET" class="lightbox" rel="cat_1"> 
     <img src="produtos/pequena/small_image.jpg" /> 
    </a> 
    <div class="produto_ref"> 
     <p>TABLET</p> 
    </div> 
</div> 

<div class="portfolio-item" data-cat="cat_1 cat_2"> 
    <a href="produtos/grande/big_image.jpg" title="ANDROID" class="lightbox" rel="cat_1"> 
     <img src="produtos/pequena/small_image.jpg" /> 
    </a> 
    <div class="produto_ref"> 
     <p>ANDROID</p> 
    </div> 
</div> 
+0

не получил то, что вы действительно хотите –

+0

Используя мой пример ... посмотрите на мои сортируемые кнопки ... если я нажму на Tablet (cat_1), это должно отобразить все itens, у которых есть cat_1 в опции Display, поэтому .. Это должно показать «ANDROID» и «TABLET» нормально? Если я нажму на CELLPHONES (cat_2), это должно показать только параметр ANDROID ... это не работает с моим скриптом в данный момент – Preston

+0

проверить мой ответ –

ответ

1

использовать следующую code-

$("#produtos-sort a").click(function(){ 
    var dc = $(this).attr('data-cat'); 
    if(dc=="all") { 
     $('.portfolio-item').show(); 
     return; 
    } 
    $('.portfolio-item').each(function(){ 
     if($(this).attr('data-cat').indexOf(dc) < 0) $(this).hide(); else $(this).show(); 
    }); 
}); 
+0

Хорошо .. это работает. но в моем коде у меня есть опция показать ВСЕ, ii есть какая-то кнопка с 'id =" all "' как я могу реализовать на вашем коде? – Preston

+0

ya позвольте мне просто внести изменения –

+0

вам просто нужно добавить 'data-cat =" all "' и его сделать –

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