Question

大家好我已经从下面的网页链接下载了这个代码，它让我可以过滤我拥有的图库页面。但他们在网站上没有太多关于多重过滤功能的文档？例如，假设我有2个选项国家和类型我可以选择美国和汽车，因此它将显示由我们和汽车过滤。

这是我使用的系数的链接。

任何人都可以帮我吗？

<div class="filters demo1">
    <div class="filter">
        <a href="#" rel="city">City</a>
        <a href="#" rel="cars">Cars</a>
        <a href="#" rel="other">Other</a>
        <a href="#" rel="all">All</a>
    </div>

    This is the part for filter option 2

    <div class="filter2">
        <a href="#" rel="Malaysia">Malaysia</a>
        <a href="#" rel="India">India</a>
        <a href="#" rel="US">US</a>
        <a href="#" rel="ALL">All</a>
    </div>

    <div class="filter3">
        <a href="#" rel="East">East</a>
        <a href="#" rel="West">West</a>
        <a href="#" rel="North">North</a>
        <a href="#" rel="ALL">All</a>
    </div>

    <div class="container">
        <ul>
            <li class="cars">
                <a href="#"><img src="assets/img1.jpg" alt="" /></a>
            </li>
            <li class="city">
                <a href="#"><img src="assets/img6.jpg" alt="" /></a>
            </li>
            <li class="cars">
                <a href="#"><img src="assets/img5.jpg" alt="" /></a>
            </li>
            <li class="city">
                <a href="#"><img src="assets/img7.jpg" alt="" /></a>
            </li>
            <li class="cars">
                <a href="#"><img src="assets/img3.jpg" alt="" /></a>
            </li>
            <li class="cars">
                <a href="#"><img src="assets/img4.jpg" alt="" /></a>
            </li>
            <li class="city">
                <a href="#"><img src="assets/img8.jpg" alt="" /></a>
            </li>
            <li class="cars">
                <a href="#"><img src="assets/img2.jpg" alt="" /></a>
            </li>
            <li class="other">
                <a href="#"><img src="assets/img10.jpg" alt="" /></a>
            </li>
            <li class="city">
                <a href="#"><img src="assets/img12.jpg" alt="" /></a>
            </li>
        </ul>
    </div>
</div>

Answer 1

尝试这个

HTML CODE

 <div class="filters demo1">
        <div class="filter">
            <a href="#" rel="city">City</a>
            <a href="#" rel="cars">Cars</a>
            <a href="#" rel="other">Other</a>
            <a href="#" rel="all">All</a>
        </div>
        <div class="container">
            <ul>
                <li class="cars">
                    <a href="#"><img src="assets/img1.jpg" alt="" /></a>
                </li>
                <li class="city">
                    <a href="#"><img src="assets/img6.jpg" alt="" /></a>
                </li>
                <li class="cars">
                    <a href="#"><img src="assets/img5.jpg" alt="" /></a>
                </li>
                <li class="city">
                    <a href="#"><img src="assets/img7.jpg" alt="" /></a>
                </li>
                <li class="cars">
                    <a href="#"><img src="assets/img3.jpg" alt="" /></a>
                </li>
                <li class="cars">
                    <a href="#"><img src="assets/img4.jpg" alt="" /></a>
                </li>
                <li class="city">
                    <a href="#"><img src="assets/img8.jpg" alt="" /></a>
                </li>
                <li class="cars">
                    <a href="#"><img src="assets/img2.jpg" alt="" /></a>
                </li>
                <li class="other">
                    <a href="#"><img src="assets/img10.jpg" alt="" /></a>
                </li>
                <li class="city">
                    <a href="#"><img src="assets/img12.jpg" alt="" /></a>
                </li>
            </ul>
        </div>
    </div>

JAVASCRIPT CODE

 $(function(){
     $('.filters.demo1').filters();
 });

注意：不要忘记包含jQuery和Filter插件js文件。将jquery.js放在过滤器插件文件

之上

jquery Gallery多重过滤器

1 个答案: