0

请查看以下 URL：http ://demo.templaza.com/w/vania/您会注意到您可以按相关性查看 divAll | Images | Videos | Post我一直在尝试做的只是在所有加载 div 时使用简单的 HTML5包含所有类型帖子的部分，然后我可以按相关性查看每个帖子，就像在上面的 URL 上完成一样快。任何人都可以为我提供指导来完成这种功能，它从所有生成的 div 等中过滤图像的方式。

我一直在为使用 image = class="image"， video =class="video"等的 div 使用类名。只是想知道如何创建这个过滤器。

4

3 回答 3

1

就像是：

$('#FilterByAll').on('click', function(){
    $('div').show(); 
});

$('#FilterByImage').on('click', function(){
    $('div').not('.image').hide(); 
    $('.image').show();
});

$('#FilterByPost').on('click', function(){
    $('div').not('.post').hide();
    $('.post').show();
});

应该为你工作。见JSFiddle

于 2013-09-13T15:58:38.867 回答
1

您提到的网站使用了一个名为isotope的 jquery 插件

http://jsfiddle.net/AYQET/

// cache container
var $container = $('#container');
// initialize isotope
$container.isotope({
  // options...
});

// filter items when filter link is clicked
$('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
  $container.isotope({ filter: selector });
  return false;
});
于 2013-09-13T16:02:46.543 回答
1

看起来您提供的示例 URL 正在使用插件来执行此操作（同位素）。

但基本上，实现这种平滑效果所需的只是一个 JS 函数，该函数循环遍历所有 div 并hidden根据其类是否与单击的按钮匹配来添加/删除一个类。

$('div').not('.someClass').addClass('hidden');

或者

$('div.someClass').removeClass('hidden');

通过添加和删除一个类hidden（而不是全部使用 JS）来做到这一点意味着您可以使用 CSS3 过渡来淡入/淡出您的 div，优化浏览器性能并允许更有趣的过渡。

CSS 看起来类似于：

//default div
div{
    opacity: 1;
    transition: opacity 1s linear;
}
//toggled class
div.hidden{
    opacity:0;
}

只是一个非常基本的例子，但是：CSS TRANSITION FILTER FIDDLE

于 2013-09-13T16:13:42.470 回答