javascript - 缩短我的代码(将 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 的初学者。在过去的三个月里,我一直在学习一门课程,这是我们在学习新语言之前的最后一项任务。因此,如果您在我的代码中看到任何其他我可以做得更好的东西,请随时告诉我:)
亲切的问候
解决方案
推荐阅读
- kubernetes - 如何在特定路径中启动 minikube?
- ruby - Chef 工作站:找不到 Chef 的综合安装目录
- react-spring - react-spring 什么时候变成“声明式”并且有大量的重新渲染?
- karate - 空手道:如何在没有 url 编码的情况下发送查询参数
- python - 如何遍历列表并搜索多个列表
- swift - Xcode Swift如何知道是否启用了可访问性设置中的“摇晃撤消”
- javascript - 第一次迭代后while循环停止
- reactjs - 如何在反应redux中单击按钮上的复选框
- c - C用fork()编写后关闭FDT?
- php - 基于另一个表日期的表中数据的总和(成本)