在< a>上应用数据过滤器 [英] Apply data-filter on <a>

问题描述

我正在使用展示柜显示器，该显示器根据类别对数据应用过滤器.

I am using a showcase display which apply filters to the data depending on the category.

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

上面是导航列表，用于单击并应用数据过滤器

This above is the nav list that is used to click and apply the data-filter

它会隐藏以下格式的div

It hides divs with the following format

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

这就是我要尝试做的. 有些类别页面将并且应该仅显示其类别 仅div，但在页面加载时，如果类别中有任何内容，它将 只显示每个项目，而我不希望那样做.

Here is what I am trying to do with this. There are category pages that will and should ONLY display the category of its divs only, but when the page loads, if there are anything in the category it will just display every single item and I want it to not do that.

所以我删除了第一个Li->查看全部 并准备就绪-> click();

so i removed the first Li -> View All and tried ready -> click();

但是它没有像我想象的那样工作 我对此有什么选择?

but it did not work as I imagined what are my options at this?

(这是我的第二个进行中的方法 隐藏所有div准备就绪. 拉div attr进行数据过滤 然后用数据过滤器字段的类取消隐藏div?)

(here is my second in progress approach hide all div at ready. pull the div attr for data-filter then unhide divs with classes of the data-filter field?)

任何输入/帮助或评论都将很棒.

any input/help or comment would be great.

-----更新

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

它只是不会应用正确的过滤器〜当我添加过滤器时，它始终不显示

it just won't apply the correct filters ~ it always displays none when I add the filter

推荐答案

您可以为此使用同位素，如果您只想使用jQuery解决方案，请告诉我.

You can use isotope for this, if you would like a jQuery only solution let me know.

另外，您的第二种方法很好-将所有div隐藏起来.拉出div属性作为数据过滤器，然后取消div与数据过滤器"字段的类.

Also, your second approach is fine 'hide all div at ready. pull the div attr for data-filter then unhide divs with classes of the data-filter field'.

别忘了将其添加到脚本中，这基本上可以解决您的问题.

Don't forget to add this to your script, this should basically fix your problem.

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

这篇关于在< a>上应用数据过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！