Question

我一直在寻找一个简单列表的演示/示例，我可以按类别对项目进行排序，使用多个输入/标签和（！）然后当然如果所有都未选中则所有结果都应该再次出现。

从各地的线索中收集了大量零碎碎片后，它终于有效了！

我的问题是 - 如何优化此解决方案？（可以优化吗？）

<!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而不是复选框的标签列表？

对其他人来说，这也是有用的！：）

单击li项目时使用jQuery过滤结果

0 个答案: