在 Javascript 中，如何向函数 change() 添加附加语句？

Question

我相信使用 Javascript 可能有一个简单的解决方案来解决我正在寻找的问题。如果我的 function change(name) 等于特定 ID，我该如何添加其他语句？例如：

function change(name) {
document.getElementById('Rectangle-container').style.display = 'none';

/* These require adding because the function's change(name) ID = Rectangle-container */

document.getElementById("ResultsTotalLiters").innerHTML = RectangleTotalLiters; 
document.getElementById("ResultsTurnoverTime").innerHTML = RectangleTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = RectangleTotalTurnovers

/* if the change is made so the active ID is oval-container, then 3 different statements need adding like so: */
document.getElementById('Oval-container').style.display = 'none';
document.getElementById("ResultsTotalLiters").innerHTML = OvalTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = OvalTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = OvalTotalTurnovers;

/**/
document.getElementById('Round-container').style.display = 'none';

/**/
document.getElementById('Oblong-container').style.display = 'none';
document.getElementById(name).style.display='block';
}

这些需要添加到矩形容器中

document.getElementById("ResultsTotalLiters").innerHTML = RectangleTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = RectangleTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = RectangleTotalTurnovers;

这些需要添加到椭圆形容器中

document.getElementById("ResultsTotalLiters").innerHTML = OvalTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = OvalTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = OvalTotalTurnovers;

需要加入圆形容器

document.getElementById("ResultsTotalLiters").innerHTML = RoundTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = RoundTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = RoundTotalTurnovers;

需要添加到长方形容器

document.getElementById("ResultsTotalLiters").innerHTML = OblongTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = OblongTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = OblongTotalTurnovers;

Answer 1

您应该更改变量，使每种类型的形状变量都包含在一个对象中，而不是作为一个独立的变量。例如，而不是

RectangleTotalLiters
RectangleTurnoverTime
RectangleTotalTurnovers

OvalTotalLiters;
OvalTurnoverTime;
OvalTotalTurnovers;

// ...

你可能会考虑像这样的对象结构

const shapeInfo = {
  Rectangle: {
    totalLiters: <something>,
    turnoverTime: <something>,
    totalTurnovers: <something>,
  },
  Oval: {
    totalLiters: <something>,
    turnoverTime: <something>,
    totalTurnovers: <something>,
  },
  // ...
}

然后，你就可以写出大大的DRY-er代码了：

const { totalLiters, turnoverTime, totalTurnovers } = shapeInfo[PoolShape];
/* assign to #ResultsTotalLiters, #ResultsTurnoverTime, #ResultsTotalTurnovers

对于你的 change 函数，你可能有一个包含所有可能形状的持久数组，forEach 在它上面，如果 id 不匹配 [=17] 则隐藏元素=]:

const shapes = ['Rectangle', 'Oval', 'Round', 'Oblong'];
function change(name) {
  shapes.forEach(id => {
    if (name !== id) document.getElementById(id).style.display = 'none';
  });
  document.getElementById(name).style.display = 'block';
}

在 Javascript 中，如何向函数 change() 添加附加语句？

In Javascript how can I add additional statements to a function change()?

javascript

if-statement

function

getelementbyid