Question

我有这个脚本非常好地过滤我的产品。但是现在，我有一些产品是两个不同类别的一部分，我必须在两者上列出它们。我需要实施什么？

<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>

Answer 1

使用以下代码 -

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

通过data-cat过滤多个项目

1 个答案: