如何扩展此 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();    

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

然后将其传递给您的函数 SearchData (country, age)

据我了解，td:eq(#) 在表中占据了一个位置？

td:eq() 

使用 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"

    Return Everything

If Country != '' Then

    If Country != 'All'

        Return Country rows that match

    If Age != 'All'

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