如何扩展此 javascript/html 或正确编写它？

Question

我是 javascript 的半新手。我有它的基础知识。（我来自使用 HAXE 编程语言制作简单的 2d 游戏）。我试图对大量数据实施下拉排序。我失败得很惨。所以我查了几个例子，发现了这个：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("#ddlCountry,#ddlAge").on("change", function () {

            var country = $('#ddlCountry').find("option:selected").val();

            var age = $('#ddlAge').find("option:selected").val();

            SearchData(country, age)

        });

    });

    function SearchData(country, age) {

        if (country.toUpperCase() == 'ALL' && age.toUpperCase() == 'ALL') {

            $('#table11 tbody tr').show();

        } else {

            $('#table11 tbody tr:has(td)').each(function () {

                var rowCountry = $.trim($(this).find('td:eq(1)').text());

                var rowAge = $.trim($(this).find('td:eq(2)').text());

                if (country.toUpperCase() != 'ALL' && age.toUpperCase() != 'ALL') {

                    if (rowCountry.toUpperCase() == country.toUpperCase() && rowAge == age) {

                        $(this).show();

                    } else {

                        $(this).hide();

                    }

                } else if ($(this).find('td:eq(1)').text() != '' || $(this).find('td:eq(1)').text() != '') {

                    if (country != 'all') {

                        if (rowCountry.toUpperCase() == country.toUpperCase()) {

                            $(this).show();

                        } else {

                            $(this).hide();

                        }

                    }

                    if (age != 'all') {

                        if (rowAge == age) {

                            $(this).show();

                        }

                        else {

                            $(this).hide();

                        }

                    }

                }

 

            });

        }

    }

Answer 1

“ALL”是什么意思？'ALL' 来自以下内容：var country = $('#ddlCountry').find("option:selected").val();&nbsp; &nbsp;&nbsp;var age = $('#ddlAge').find("option:selected").val();然后将其传递给您的函数 SearchData (country, age)据我了解，td:eq(#) 在表中占据了一个位置？td:eq()&nbsp;使用 eq 选择器，它根据括号 () 内的索引选择一个元素。由于没有额外的过滤器，它只会在该索引处获取 td。注意：索引是从 0 开始的，因此如果有 5 个单元格，您将得到单元格 0、1、2、3、4。https://api.jquery.com/eq-selector/为什么所有内容都转换为大写？在这种情况下，确实没有理由转换为大写（或小写）。通常是“规范化”来自用户的输入数据。如果他们决定键入 All、all、ALL 等，将它们转换为“ALL”更容易进行比较。我如何扩展这段代码以包含多个选择。它会是大量的 if/else 还是这段代码写得不好并且一个简单的循环就足够了？如果不进一步说明您要完成的任务，我无法对此做出太多回答。现在你的逻辑看起来大致是这样的：If Country = "All" & Age = "All"&nbsp; &nbsp; Return EverythingIf Country != '' Then&nbsp; &nbsp; If Country != 'All'&nbsp; &nbsp; &nbsp; &nbsp; Return Country rows that match&nbsp; &nbsp; If Age != 'All'&nbsp; &nbsp; &nbsp; &nbsp; Return Age rows that match此代码是多余的。它比较 rowCountry != '' OR rowCountry != ''。您可以将 $(this).find('td:eq(1)').text() 替换为 rowCountry 以使其更易于阅读。$(this).find('td:eq(1)').text() != '' || $(this).find('td:eq(1)').text() != ''您可以看到此 rowCountry 设置为相同的值：var rowCountry = $.trim($(this).find('td:eq(1)').text());