javascript - 让复选框过滤器正常工作

Question

设计师在这里学习编码，而不是在我的 js 或使用 jquery 中学习太多。试图获得一个与这个人几乎相同的复选框过滤器:http://jsfiddle.net/BCbeU/但似乎无法让它像我正在构建的网站上的 jsfiddle 那样运行。

这是我的复选框的 html:

    <div class="tags">
    <label><input type="checkbox" rel="all"/> Show All </label>
    <label><input type="checkbox" rel="one"/> 1 Bedroom </label>
    <label><input type="checkbox" rel="two"/> 2 Bedroom </label>
    <label><input type="checkbox" rel="below"/> Below $1500 </label>
    <label><input type="checkbox" rel="above"/> Above $1500 </label>
</div>

这是我要过滤的项目的 html:

<div id="shelf1-housing">
<ul class="results">
    <li class="all one">
        <a href="html/sessionone.html">
            <div class="box">
                <img src="../images/apartment2.jpg">
                    <h4>3 Bedroom Apartment</h4>
                    <h5>$1500 a month</h5>
            </div>
        </a>
    </li>

    <li class="all below">
        <a href="html/sessionone.html">
            <div class="box">
                <img src="../images/apartment1.jpg">
                    <h4>3 Bedroom Apartment</h4>
                    <h5>$1500 a month</h5>
            </div>
        </a>
    </li>

    <li class="below all">
        <a href="html/sessionone.html">
            <div class="box">
                <img src="../images/apartment2.jpg">
                    <h4>3 Bedroom Apartment</h4>
                    <h5>$1500 a month</h5>
            </div>
        </a>
    </li>

    <li class="all above">
        <a href="html/sessionone.html">
            <div class="box">
                <img src="../images/apartment1.jpg">
                    <h4>3 Bedroom Apartment</h4>
                    <h5>$1500 a month</h5>
            </div>
        </a>
    </li>

    <li class="all">
        <a href="html/sessionone.html">
            <div class="box">
                <img src="../images/apartment2.jpg">
                    <h4>3 Bedroom Apartment</h4>
                    <h5>$1500 a month</h5>
            </div>
        </a>
    </li>

</ul><!--End of Results-->
</div><!--End of Shelf1-Housing-->

这是javascript:

$('div.tags').delegate('input:checkbox', 'change', function(){
     var $lis = $('.results > li').hide();
     //For each one checked
     $('input:checked').each(function(){
          $lis.filter('.' + $(this).attr('rel')).show();
     });      
});

在此先感谢您的帮助。仍在学习基础知识，他们还没有让我走到这一步，很快，但还没有:)

Answer 1

我通过从您的网站复制代码创建了 fiddle 。请查看http://jsfiddle.net/LXymq/

进行了以下更改:
1) 将 Li 添加回一个名为 results 的 div。这就是你的方式。
<div class="results"> ... All LIs ... </div>

2) 将所有代码添加到 $(document).ready 函数，因为代码在 dom 准备就绪之前就已执行。

$(document).ready(function() { ... all your code inside this .... });

4) 硬编码图像路径以获得美感。