我正在尝试使用jQuery创建一个“过滤器切换器”,用于在应用了不同类别的页面上显示/隐藏图像(使用rel属性)。过滤器在图像列表之外,所以我需要通过比较(我认为?)值来解决它们。
我似乎无法找到一种方法来应用“开启”开关来淡出所有不属于当前类别的图像。请参阅以下代码:
$('#filter a').toggle(function() {
// On
$('.nodes a').removeClass('inactive');
$('.nodes a').animate({opacity: 1}, 250);
$('.nodes a').animate({opacity: 1}, 1);
$('filter a').animate({opacity: 0.5}, 1);
$(this).animate({opacity: 1}, 1);
var filter = $(this).attr('rel');
$('.nodes span').not('.' + filter).parent().addClass('inactive');
$('.nodes a.inactive').animate({opacity: 0.5}, 250);
$('#filter a').not(this).animate({opacity: 0.5}, 250);
}, function() {
// Off (Reset)
$('.nodes a').removeClass('inactive');
$('.nodes a').animate({opacity: 1}, 250);
$('#filter a').animate({opacity: 1}, 250);
});
HTML结构就是这样 -
<ul class="nodes">
<li>
<a>
<span>
<img>
</span>
</a>
</li>
</ul>
<div id="filter">
<ul>
<li>
<a href="#" rel="category">Category</a>
</li>
<ul>
</div>
编辑:找到解决方案,查看更新的代码。可能会使用更多的调整,但它现在会做。