Javascript 如何优化此代码段？

由于只能将各个部分粘合在一起以使一些JS正常工作，我想出了以下代码

if (document.getElementById("component_projector_askforproduct")){
  document.getElementById("component_projector_askforproduct").style.display = "none";
}
if (document.getElementById("askforproduct_58676")){
  document.getElementById("askforproduct_58676").className = "";
}
if (document.getElementById("longdescription_58676")){
  document.getElementById("longdescription_58676").className = "";
}

if (document.getElementById("opinions_58676")){
  document.getElementById("opinions_58676").className = "activTab";
}
if (document.getElementById("component_projector_opinions")){
  document.getElementById("component_projector_opinions").style.display = "block";
}
if (document.getElementById("component_projector_opinions_add")){
  document.getElementById("component_projector_opinions_add").style.display = "block";
}

---

这是可行的，但我知道这是一团糟。如何优化和精简此代码？

不要为同一ID调用getElementById两次。将返回值存储在变量中，并在尝试操作它之前检查返回值。

使用三元条件来美化代码

或使用开关条件

---

建议：如果我在这种情况下，我将使用特定的函数来执行此任务，并使用三元条件来美化代码。

EDIT我删除了我的最后一个答案，并从Mirko Vukušić的答案中得到了一个想法

如果您创建用于隐藏和显示元素的css类，您可以这样做

css

javascript

var arr = [
  ["component_projector_askforproduct", "hide"],
  ["askforproduct_58676", ""],
  ["longdescription_58676", ""],
  ["opinions_58676", "activTab"],
  ["component_projector_opinions", "show"],
  ["component_projector_opinions_add", "show"]
]

for (i = 0; i < arr.length -1; i++) {
  var elm = document.getElementById(arr[i][0]);
  if(elm) {
    elm.className = arr[i][1];
  }
}

var-arr=[
[“组件”\u投影仪\u askforproduct”，“隐藏”]，
[“askforproduct_58676”，”，
[“长描述”，
[“意见书”、“活动选项卡”]，
[“组件/投影仪/意见”，“显示”]，
[“组件\u投影仪\u意见\u添加”，“显示”]
]
对于（i=0；i

我要做的是：

使用对象存储所有更改，如：

var objChecks = {
  component_projector_askforproduct: "some_display_none_className",
  askforproduct_58676: "",
  longdescription_58676: ""
}

然后创建函数来处理它（将objChecks传递给它）：

稍微更改一下HTML。我注意到有时您会更改

类名

，有时更改

样式。显示

。我将创建一个新类来隐藏一个元素（与

display=none

相同），这将使一切变得更加整洁

---

要避免不断检查并避免错误，您可以使用以下巧妙的方法来设置默认值：

function $(elem) {

return document.getElementById(elem) || document.createElement("div");
}

所以，这样，若元素不存在，它将被创建，但不会附加到主体

测试：

函数$（elem）{
return document.getElementById（elem）| | document.createElement（“div”）；
}
$（“component\u projector\u askforproduct”）.style.display=“无”；
$（“askforproduct_58676”）。类名=“”；
$（'LongDescription58676'）。className=“”；
$（‘意见’）.className=“activeTab”；
$（“组件投影视图”）.style.display=“块”；
//等等等等……

.activeTab{
背景：红色；
颜色：白色；
}

6666666666666
QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ
11111111111111

分析问题代码后，我了解它是一种菜单或选项卡，可以激活、停用、显示和隐藏元素。为此，我使用内置方法创建了结构。它可以在许多元素上使用，可以在一个元素上多次使用，它还具有链方法，因此可以在一个代码行中运行许多方法

检查此结构的代码和示例，如果有一些问题或不清楚的地方，请询问。我没有使用ES6或jQuery，因为这个问题与此无关

var ME=function（）{
//结构表示单个菜单元素
var MenuElement=函数（id）{
this.el=document.getElementById（id）；
};
MenuElement.prototype.hide=函数（）{
if（this.el）
this.el.style.display=“无”；
归还这个；
};
MenuElement.prototype.show=函数（）{
if（this.el）
this.el.style.display=“block”；
归还这个；
};
MenuElement.prototype.active=函数（）{
if（this.el）
this.el.className=“activeTab”；
归还这个；
};
MenuElement.prototype.deActive=函数（）{
if（this.el）
this.el.className=“”；
归还这个；
};
//仅返回带有create方法的obj，以便在不使用新关键字的情况下使用它
返回{
创建：函数（id）{
返回新的菜单元素（id）；
}
};
}();
//使用示例-与问题片段相同
ME.create（“component_projector_askforproduct”）.hide（）；
ME.create（“askforproduct_58676”）.deActive（）；
ME.create（“longdescription58676”）.deActive（）；
ME.create（“意见”）.active（）；
ME.create（“组件视图”）.show（）；
ME.create（“组件\投影仪\意见\添加”）.show（）；
//在一个元素上多次使用示例-仅用于示例目的
var element=ME.create（“组件”\u投影仪”\u askforproduct”）；
var-toggle=true；
setInterval（函数（）{
如果（切换）
element.show（）.active（）；//链接示例
其他的
元素。deActive（）.hide（）；
切换=！切换；
},1000);
div.activeTab{
字体大小：粗体；
颜色：红色；
}

组件\u投影仪\u askforproduct
askforproduct_58676
朗普58676
意见58676
组件\u投影仪\u意见
组件\u投影仪\u意见\u添加
您是否只是使用
if
检查它们是否存在？不知道上下文，很难回答。保持原样，如果有效。@PraveenKumar我正在检查ID是否存在，如果存在，则设置内联样式或添加/删除类。我首先检查它是否存在的原因是，如果该元素在控制台中缺少创建错误，它将返回NULL。@bskool-Perfect。保持原样。你可能想退房。请务必阅读他们的帮助中心，以确保它的主题，但他们通常是最好的地方去，嗯，代码审查。为什么警报？这不是原始代码在缺少元素的情况下所做的。更好的是，希望它能适用于所有OP的情况…：）
function processChecks(checks) {
  Object.getOwnPropertyNames(objChecks).map(function(check){
    var el = document.getElementById(check);
    if (el) el.className=objChecks[check];
  })
}

function $(elem) {

return document.getElementById(elem) || document.createElement("div");
}