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

コメントで、 jQuery1.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 に答える