单击li项时使用jQuery筛选结果的步骤_Jquery_List_Filter_Checkbox

单击li项时使用jQuery筛选结果的步骤

jquery list filter checkbox

单击li项时使用jQuery筛选结果的步骤,jquery,list,filter,checkbox,Jquery,List,Filter,Checkbox,我一直在寻找一个简单列表的演示/示例，在这里我可以按类对项目进行排序，有多个输入/标记和！当然，如果所有结果都未选中，那么所有结果都应该再次显示在从各地收集了大量的线索后，它终于起作用了我的问题是-如何优化此解决方案？它能被优化吗 <!DOCTYPE html> <html> <head> <title>Bunko.se webbdesign exempel</title> <l

我一直在寻找一个简单列表的演示/示例，在这里我可以按类对项目进行排序，有多个输入/标记和！当然，如果所有结果都未选中，那么所有结果都应该再次显示

在从各地收集了大量的线索后，它终于起作用了

我的问题是-如何优化此解决方案？它能被优化吗

<!DOCTYPE html>
    <html>
    <head>
        <title>Bunko.se webbdesign exempel</title>
        <link rel="stylesheet" type="text/css" href="mystyle.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    </head>

    <body>


    <div class="filters">
        <input type="checkbox" value="teacher" />teacher<br />
        <input type="checkbox" value="math" />math<br />
        <input type="checkbox" value="principal" />principal<br />
        etc..
    </div>

    <script>

        //An array that will contain all filters
        var filter_array = new Array();

        // activates if checkbox is clicked
        jQuery(".filters input").click(function() {

            // Empties the array
            // - so that it removes values that were previously selected but are now unchecked.
            var filter_array = new Array();
            jQuery('.filters input:checked').each( function() {

                // Add checked box value to array
                filter_array.push(jQuery(this).val());
            });


            // if there are no filters then show all results!
            if (filter_array.length === 0) {
                jQuery(".search_results div").show();

            } else{
                jQuery(".search_results div").hide().filter('.' + filter_array.join('.')).show();
            }
        });

    </script>


        <div class="search_results">
            <div class="math textbook free">
                I contain classes: math, textbook and free
            </div>

            <div class="science chemistry teacher">
                I contain classes: science, chemistry, teacher
            </div>

            <div class="principal teacher math">
                I contain classes: principal teacher math
            </div>
        </div>
    </body>
    </html>

哦，那么，除了使用ul li而不是复选框的标签列表之外，如何做同样的事情呢

希望这对其他人也有用！：

在标签上添加单击事件而不是复选框是什么意思？我认为您的解决方案相当好，使用类并让浏览器完成工作可能相当快。您如何使用大量标记和项目div进行基准测试，并注意到它是否很慢？请注意，您可能可以跳过第一个var filter_array。第一个var现在已删除：关于li，似乎我必须使用$document.readyfunction{这在使用复选框时是不必要的。您是否在标记之前使用了$document.readyfunction？那么浏览器可能还不知道标记。但是通常使用某种DOM就绪机制来知道何时开始操作DOM树更安全。