javascript - 如何在网站中创建过滤器

Question

如何为网站中的展示创建过滤器？
有点像对事物进行分类。

我想建立一个展示我的照片的网站。但是，我不知道如何创建带有筛选功能的展示柜，有人可以帮忙吗？

Answer 1

我在互联网上搜索“用图像分类过滤器”并找到了这个 JSFiddle。希望对您有所帮助。

它使用 HTML 和 JavaScript。

查看链接:http://jsfiddle.net/davidThomas/Ebrnj/

<ol id="controls">
    <li><a href="#" id="web">Web</a></li>
    <li><a href="#" id="canvas">Canvas</a></li>
    <li><a href="#" id="print">Print</a></li>
    <li><a href="#" id="all">All</a></li>
</ol>
<div id="gallery">
    <img src="http://davidrhysthomas.co.uk/img/dexter.png" class="web" />
    <img src="http://davidrhysthomas.co.uk/img/mandark.png" class="canvas" />
    <img src="http://davidrhysthomas.co.uk/img/drPooh2.png" class="print" />
</div>

$('#controls li a').click(
    function(e){
        e.preventDefault();
        var that = this,
            $that = $(that),
            id = that.id,
            gallery = $('#gallery');
        if (id == 'all') {
            gallery.find('img:hidden').fadeIn(1000);
        }
        else {
            gallery.find('img.' + id + ':hidden').fadeIn(1000);
            gallery.find('img').not('.' + id).fadeOut(1000);
        }
    });

祝你好运!!如果您对此有任何疑问，请告诉我们。