Question

我正在尝试使以下代码工作，但我的jQuery技能是如此基本，我找不到问题

此代码用于根据复选框数组

过滤列表

代码很可能是无bug的

问题当然来自于一些愚蠢的事情，例如没有正确宣布，没有在合适的条件下测试或没有调用所需的脚本

万分感谢！

<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>

Answer 1

在您的代码中，您有这一行

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

改变它：

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

Answer 2

您是否需要根据复选框来过滤结果？检查出来 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>

<强> Jquery的

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

复选框使用jQuery过滤

2 个答案: