在Javascript中，如何向函数change（）添加其他语句？

我相信使用Javascript可能会有一个简单的解决方案。如果我的

函数更改（名称）

等于特定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;

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

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;

需要添加到圆形容器中吗

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;

需要添加到长方形容器中吗

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;

---

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

RectangleTotalLiters
RectangleTurnoverTime
RectangleTotalTurnovers

OvalTotalLiters;
OvalTurnoverTime;
OvalTotalTurnovers;

// ...

你可以考虑一个对象结构，比如

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

对于

change

函数，您可能有一个所有可能形状的持久数组，

forEach

，如果

id

与

name

不匹配，则隐藏元素：

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';
}

---

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

RectangleTotalLiters
RectangleTurnoverTime
RectangleTotalTurnovers

OvalTotalLiters;
OvalTurnoverTime;
OvalTotalTurnovers;

// ...

你可以考虑一个对象结构，比如

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

对于

change

函数，您可能有一个所有可能形状的持久数组，

forEach

，如果

id

与

name

不匹配，则隐藏元素：

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';
}

---

Tbh我仍然对您试图实现的目标感到困惑，但从外观上看，您试图使用基于某种场景的数据填充HTML元素。我将通过使用开关替换if来处理它，该开关将运行函数更改并向其传递多个相关参数，@NashPL我编辑了该问题以提供更好的解释。你有什么新的建议可以提供给我吗？我仍然对你想要实现的目标感到困惑，但从表面上看，你试图用基于某种场景的数据填充HTML元素。我将通过使用开关替换if来处理它，该开关将运行函数更改并向其传递多个相关参数，@NashPL我编辑了该问题以提供更好的解释。你有什么新的答案建议吗？不确定这是否正是他所要求的，但请投票赞成干燥@某些性能我不确定对象结构是否能工作，因为我的代码的其他部分也在使用这些变量处理不同的问题。您还有其他选择吗？没有理由不可能（或很难）更改其他代码来处理该对象。最坏的情况，请参考，例如，

shapeInfo.Oval.totalLiters

而不是

ovaltalliters

不确定这是否正是他所要求的，但请投票赞成干燥@某些性能我不确定对象结构是否能工作，因为我的代码的其他部分也在使用这些变量处理不同的问题。您还有其他选择吗？没有理由不可能（或很难）更改其他代码来处理该对象。最坏情况，请参阅，例如，

shapeInfo.Oval.totalLiters

而不是

ovaltalliters