Question

我在使这段代码工作时遇到了问题：

    $(function(){
        $('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();
            });
        });
    });

使用HTML：

      <div class="tags">
        <label><input type="checkbox" rel="arts" /> Arts </label>
        <label><input type="checkbox" rel="computers" /> Computers </label>
        <label><input type="checkbox" rel="health" /> Health </label>
        <label><input type="checkbox" rel="video-games" /> Video Games </label>
      </div>
      <ul class="results">
         <li class="arts computers">Result 1</li>
         <li class="video-games">Result 2</li>
         <li class="computers health video-games">Result 3</li>
         <li class="arts video-games">Result 4</li>
      </ul>

我在IE，FF＆amp;歌剧，但我没有得到预期的结果。也就是说，单击复选框后内容不会被过滤？我试图复制类似的东西：

http://www.houseoffraser.co.uk/Jeans+for+Women/302,default,sc.html

请注意页面左侧栏上的手风琴效果。我不太担心手风琴本身，这是我现在关注的复选框功能。在页面加载时，所有查询结果（大约1300左右）都会显示给用户。

然后，用户可以通过单击复选框来过滤或优化结果。我假设这是某种Jquery / Ajax脚本，但我不完全确定？我是在正确的轨道上吗？

提前致谢。

Answer 1

您在a comment中提到您正在使用jQuery 1.3

jQuery的delegate() method在1.4.2中引入，因此无法使用。您将不得不使用更高版本的jQuery（您使用这样一个旧版本的任何原因？）。

如果您打开开发者控制台（Chrome中的F12快捷方式），您应该会看到一条错误消息，指出TypeError: Object [object Object] has no method 'delegate'

如果您需要使用jQuery 1.3，请尝试：

$(function() {
    $('div.tags').bind('change', function(e) {
        var that = e.originalEvent.target;

        if ($(that).is('input:checkbox')) {
            var $lis = $('.results > li ').hide();
            //For each one checked
            $('input:checked ').each(function() {
                $lis.filter('.' + $(that).attr('rel')).show();
            });
        }
    });
});

您可以看到working here

Answer 2

$(document).ready(function () {
            $('.results > li').hide();

            $('div.tags').find('input:checkbox').live('click', function () {
                $('.results > li').hide();
                $('div.tags').find('input:checked').each(function () {
                    $('.results > li.' + $(this).attr('rel')).show();
                });
            });
        });

直播演示，请参阅此链接：http://jsfiddle.net/nanoquantumtech/Ddnuh/

Answer 3

尝试一次

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

使用复选框和＆amp ;;过滤内容JQuery的

3 个答案: