使复选框过滤器正常工作答案

【问题标题】：Getting check box filters to work properly使复选框过滤器正常工作
【发布时间】：2012-12-12 06:21:39
【问题描述】：

设计师在这里学习编码，在我的 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();
     });      
});

提前感谢您的帮助。仍在学习基础知识，他们还没有让我走这么远，很快，但还没有:)

【问题讨论】：

我没有发现任何问题：jsfiddle.net/DerekL/FGetW
我认为你使用了错误的事件，考虑使用点击，而不是改变。
@RobG - 有什么区别？
在 HTML 4 中，change 被指定为在控件更改值并失去焦点时触发。一些浏览器以这种方式实现它，另一些浏览器以HTML5 的工作方式实现它。因此，最好使用点击而不是更改，因为它更加一致。
@RobG 谢谢，我会换掉它，看看我能不能让它工作。我仍然让它在 js fiddle 中工作得很好，但不是在这里：assemblyman.co/html/filter.html 我假设我错过了一些超级简单的东西，就链接 jquery 或 js fiddle 的实际脚本而言。

标签： javascript jquery filter

【解决方案1】：

我通过从您的网站复制代码来创建小提琴。请查看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) 硬编码图像路径以获得美感。

【讨论】：

代码中的一些未知字符似乎破坏了脚本。我在这里复制了它们。
感谢您的帮助，我将您的代码插入到 js fiddle 之外，但无法正常工作？我假设我遗漏了一些明显的东西，即 js fiddle 添加了一些我没有或做错的东西？你可以在这里看到我的意思：assemblyman.co/html/filter.html
@MatthewWilliams：你能根除那些未知字符吗？
No :/ 我现在才重新开始并重新输入了几次，并试图摆脱那些空间，但仍然没有让它正常工作。还是我误解了该怎么做？
我相信我已经摆脱了控制台中的未知字符，但仍然无法正常工作...assemblyman.co/html/filter.html hmmm（顺便说一句谢谢你的帮助）

【解决方案2】：

这个小例子可能会有所帮助。

Check and uncheck a checkbox with jQuery

【讨论】：