[英]Apply data-filter on <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
<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的类别,但是在页面加载时,如果类别中有任何内容,它将仅显示每个项目,而我不希望这样做。
所以我删除了第一个Li-> View All并尝试就绪-> click();
但这没有奏效,因为我想像我有什么选择?
(这是我进行中的第二种方法,将所有div都准备好隐藏。将div attr用作数据过滤器,然后用数据过滤器字段的类取消隐藏div?)
任何输入/帮助或评论都将很好。
- - -更新
<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>
它只是不会应用正确的过滤器〜当我添加过滤器时,它始终不显示任何内容
如果您只想使用jQuery解决方案,请告诉我,您可以使用同位素 。
另外,您的第二种方法很好-将所有div隐藏起来。 将div属性拉到数据过滤器中,然后用数据过滤器字段的类取消隐藏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;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.