0

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

演示链接

这是我使用的 coe 的链接。

谁可以帮我这个事 ？

<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>
4

1 回答 1

1

试试这个

代码 

 <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代码

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

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

于 2012-11-21T07:02:14.070 回答