首页 > 解决方案 > 缩短我的代码(将 3 个功能变成 1 个)使其停止工作。我究竟做错了什么?

问题描述

所以快速总结一下我的问题:

对于课堂上的作业,我必须获取 json 数据并将其放在屏幕上的表格中。这工作正常,我不会包含那部分代码,因为我 100% 确定这不是问题。

困难的部分是通过单击页面顶部的三个链接按性别排序。我使用三个匿名 onclick 函数进行了这项工作,但我的老师告诉我我需要尝试而不是重复多行代码。所以他向我展示了一种将其放入一个函数中的方法。这是在课堂结束时,所以我不能马上在我自己的文件中做到这一点。我在家里试过了,但它似乎不起作用,我只是不知道为什么,因为我的三个单独的 onclick 仍然可以完成工作。

这是三个单独的 onclick 函数。正如您在单击男性链接时所看到的那样。它隐藏了所有女性行。如果你点击女性,它会隐藏所有的男性,如果你点击它的所有显示所有人。

males.onclick = function() { 
         const rowsF = document.querySelectorAll("#female");
        const rowsM = document.querySelectorAll('#male');
        for (const row of rowsF) {
            row.hidden = true;
        }
        for (const row of rowsM) {
            row.hidden = false;
        }
}
females.onclick = function() { 
         const rowsF = document.querySelectorAll("#female");
        const rowsM = document.querySelectorAll('#male');
        for (const row of rowsF) {
            row.hidden = false;
        }
        for (const row of rowsM) {
            row.hidden = true;
        }
}
all.onclick = function() { 
         const rowsF = document.querySelectorAll("#female");
        const rowsM = document.querySelectorAll('#male');
        for (const row of rowsF) {
            row.hidden = false;
        }
        for (const row of rowsM) {
            row.hidden = false;
        }
}

现在这是我调整后的代码,看起来更干净、更短。但是这里一定有一个错误,因为这似乎不起作用,我只是不知道为什么它不起作用。有什么帮助吗?

males.onclick = gender("m");
females.onclick = gender("f");
all.onclick = gender("a");

function gender(stringGender) {
    const females = document.querySelectorAll('#female');
    const males = document.querySelectorAll("#male");
    if (stringGender === 'm') {
        hideList(females, true);
    }
    if (stringGender === "f") {
        hideList(males, true);
    }
    if (sGeslacht === "a") {
        hideList(females, false);
        hideList(males, false);
    }
};

function hideList(genderRow, isHidden) {
    for (const row of genderRow) {
        row.hidden = isHidden; 
    }
};         

我是 javascript 的初学者。在过去的三个月里,我一直在学习一门课程,这是我们在学习新语言之前的最后一项任务。因此,如果您在我的代码中看到任何其他我可以做得更好的东西,请随时告诉我:)

亲切的问候

标签: javascript

解决方案


推荐阅读