所以我正在尝试将同位素设置为我的投资组合分类器。在这里,我使用数据过滤器设置了我的过滤器。
<div class="filter clear">
<ul>
<li><a href="#" class="selected" data-filter="*">All</a></li>
<li><a data-filter=".web">Web Design</a></li>
<li><a data-filter=".ill">Ilustration</a></li>
<li><a data-filter=".logo">Logo</a></li>
<li><a data-filter=".video">Video</a></li>
<li><a data-filter=".print">Print Design</a></li>
</ul>
</div>
这是我的投资组合结构。
<div class="portfolio">
<figure class="entry web">
<img src="img/portfolio-image.jpg">
<span class="hover">
<a href="#">VIEW PROJECT</a>
</span>
</figure>
<figure class="entry ill">
<img src="img/portfolio-image.jpg">
<span class="hover">
<a href="#">VIEW PROJECT</a>
</span>
</figure>
<figure class="entry logo">
<img src="img/portfolio-image.jpg">
<span class="hover">
<a href="#">VIEW PROJECT</a>
</span>
</figure>
<figure class="entry video">
<img src="img/portfolio-image.jpg">
<span class="hover">
<a href="#">VIEW PROJECT</a>
</span>
</figure>
<figure class="entry print">
<img src="img/portfolio-image.jpg">
<span class="hover">
<a href="#">VIEW PROJECT</a>
</span>
</figure>
</div>
</div>
这是我实现同位素的 Jquery。
<script type="text/javascript">
$(window).load(function(){
var $container = $('.portfolio');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
$('nav.filter ul a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
var $optionSets = $('nav.filter ul'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('nav.filter ul');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
});
});
谁能帮我找出错误...
当我单击要排序的链接时,它只遵循 href 而不会排序...