1

我在使此代码正常工作时遇到问题：

    $(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 和 Opera 中尝试过，但没有得到预期的结果。也就是说，点击复选框后内容没有被过滤？我正在尝试复制与此类似的内容：

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

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

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

提前致谢。

4

3 回答 3

1

您在评论中提到您正在使用 jQuery 1.3

jQuery 的delegate()方法是在 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();
            });
        }
    });
});

你可以在这里看到它的工作原理 </p>

于 2012-05-22T12:42:09.267 回答
0 
$(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/

于 2012-05-22T13:07:27.460 回答
-1

试试这个

 $(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();
            });
        });
    });
于 2012-05-22T12:22:44.427 回答