javascript - 我该如何优化这个片段？

Question

由于只能将各个部分粘合在一起才能使一些 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";
}

它有效，但我知道这很困惑。我怎样才能优化和精简这段代码？

Answer 1

我会做的是:

1. 使用对象来存储所有更改，例如:

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

2. 然后创建函数来处理它(将 objChecks 传递给它):

   function processChecks(checks) {
     Object.getOwnPropertyNames(objChecks).map(function(check){
       var el = document.getElementById(check);
       if (el) el.className=objChecks[check];
     })
   }
   

3. 稍微更改一下您的 HTML。我注意到有时你会更改className，有时会更改style.display。我会创建一个隐藏元素的新类(与 display=none 相同)，这使得一切变得更加整洁。