0

次のコードを機能させようとしていますが、私の jQuery スキルは非常に基本的なもので、問題が見つかりません。

このコードは、チェックボックスの配列に基づいてリストをフィルタリングするためのものです

コードはおそらくバグフリーです

問題は確かに、正しく宣言していない、適切な条件でテストしていない、または必要なスクリプトを呼び出さないなどの愚かな何かから来ています

どうもありがとう！

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#options input.type_check").click(function() {
        if($(this).is(':checked')) {
            $("#events li."+$(this).attr('id')).removeClass('type_hidden');
            if(!$("#events li."+$(this).attr('id')).hasClass('start_hidden')) {
                $("#events li).not(".type_hidden, .start_hidden").slideDown();
            }
        } else {
            $("#events li."+$(this).attr('id')).addClass('type_hidden');
            $("#events li."+$(this).attr('id')).slideUp();
        }
        return false;
    });

    $("#options input.start_check").click(function() {
        if($(this).is(':checked')) {
            $("#events li."+$(this).attr('id')).removeClass('start_hidden');
            if(!$("#events li."+$(this).attr('id')).hasClass('type_hidden')) {
                $("#events li).not(".type_hidden, .start_hidden").slideDown();    
            }
        } else {
            $("#events li."+$(this).attr('id')).addClass('start_hidden');
            $("#events li."+$(this).attr('id')).slideUp();
        }
        return false;
    });
});
</script>
</head>
<body>
<p>Types:</p>
<div><input name="type[]" type="checkbox" id="type_0" value="0" class="type_check" checked="checked" /><label for="type_0">Type 0</label></div>
<div><input name="type[]" type="checkbox" id="type_1" value="1" class="type_check" checked="checked" /><label for="type_1">Type 1</label></div>
<div><input name="type[]" type="checkbox" id="type_2" value="2" class="type_check" checked="checked" /><label for="type_2">Type 2</label></div>
<div><input name="type[]" type="checkbox" id="type_3" value="3" class="type_check" checked="checked" /><label for="type_3">Type 3</label></div>
<div><input name="type[]" type="checkbox" id="type_4" value="4" class="type_check" checked="checked" /><label for="type_4">Type 4</label></div>

<p>Starts:</p>
<div><input name="start[]" type="checkbox" id="start_072009" value="072009" class="start_check" checked="checked" /><label for="type_072009">July 2009</label></div>
<div><input name="start[]" type="checkbox" id="start_082009" value="082009" class="start_check" checked="checked" /><label for="type_082009">August 2009</label></div>
<div><input name="start[]" type="checkbox" id="start_092009" value="092009" class="start_check" checked="checked" /><label for="type_092009">September 2009</label></div>
<div><input name="start[]" type="checkbox" id="start_102009" value="102009" class="start_check" checked="checked" /><label for="type_102009">October 2009</label></div>

<p>Events</p>
<ul id="events">
    <li id="a1768" class="type_0 start_072009">Event 1</li>
    <li id="a2190" class="type_1 start_072009">Event 2</li>
    <li id="a2191" class="type_2 start_072009">Event 3</li>
    <li id="a1864" class="type_2 start_082009">Event 4</li>
    <li id="a1679" class="type_3 start_082009">Event 5</li>
    <li id="a2042" class="type_0 start_092009">Event 6</li>
    <li id="a1717" class="type_4 start_092009">Event 7</li>
    <li id="a1917" class="type_4 start_092009">Event 8</li>
    <li id="a1767" class="type_4 start_092009">Event 9</li>
    <li id="a1866" class="type_2 start_102009">Event 10</li>
</ul>

</body>
</html>
4

2 に答える 2

0

あなたのコードには、この行があります

  $("#events li).not(".t.........

それを変更：

   $("#events li").not(".t
于 2012-04-26T06:46:25.040 に答える
0

チェックボックスに応じて結果をフィルタリングするものが必要ですかhttp://jsfiddle.net/ag263ms9/ HTML
を チェックしてください


<div class="tags">
  <label><input id="ss" type="checkbox" rel="arts" /> Arts </label><label>
  <input id="aa" 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>
<p></p>
<p></p>
<hr />
<div id="sso">
  Click to uncheck #Computers</div>
<p></p>
<p></p>
<hr />
<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>

Jクエリ

    $(document).ready(function () {

    $(':checkbox').click(function () {
        if ($(':checkbox:checked').length > 3) {
            alert('you can not check more than 3 checkboxes');
            $(this).prop('checked', false);
        }
    });
}) $('div.tags').delegate('input[type=checkbox]', 'change', function () {
    var $lis = $('.results > li'),
    $checked = $('input:checked');

    if ($checked.length) {
        var selector = $checked.map(function () {
                return '.' + $(this).attr('rel');
            }).get().join('');
        var $results = $lis.hide().filter(selector);

        if ($results.length > 0) {
            $('.no-results-found').remove();
            $results.show();
        } else {
            $('.results').append('<li class="no-results-found">No results found.</li>');
        }
    } else {
        $lis.show();
    }

    //click to uncheck

    $('#sso').on('click', function (ev) {
        $("#aa").prop("checked", false);
        var $results = $lis.show().filter(selector);
    });

});
于 2014-11-18T00:58:51.017 に答える