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

编辑我删除了我的最后一个答案，并从MirkoVukušić的答案中得到了一个想法。

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

CSS

.hide { display: none!important; }
.show { display: block!important; }

的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];
  }
}

Answer 2

我要做的是：

使用object存储您的所有更改，如：

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

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

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

稍微改变你的HTML。我注意到有时候您会更改className，有时会更改style.display。我会创建一个隐藏元素的新类（与display=none相同），这样可以使所有内容更加整洁。

Answer 3

使用三元条件进行代码美化。

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

或使用开关条件。

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

Answer 4

为了避免不断检查并避免错误，你可以做这个巧妙的技巧，设置默认值：

function $(elem) {

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

所以，这样，如果元素不存在，它将被创建，但不会附加到正文！

测试：

function $(elem) {

return document.getElementById(elem) || document.createElement("div");
}

$("component_projector_askforproduct").style.display = "none";
$("askforproduct_58676").className='';
$('longdescription_58676').className="";
$('opinions_58676').className="activeTab";
$("component_projector_opinions").style.display = "block";
//etc, etc....

.activeTab {
  background:red;
  color:white;
}

<div id="component_projector_askforproduct">
6666666666666
</div>
<div id="opinions_58676">
qqqqqqqqqqqqqq
</div>

<div id="component_projector_opinions7">
11111111111111
</div>

Answer 5

分析问题代码后，我了解它是某种菜单或标签，可以激活，停用，显示，隐藏元素。我用方法构建了这个目的的结构。它可以在很多元素上使用，它可以在一个元素上多次使用，它也有链式方法，因此可以在一个代码行中运行许多方法。

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

＆＃13;

var ME = function(){ 
  //structure represent single menu element  
  var MenuElement = function(id){

    this.el = document.getElementById(id);
  
  };

  MenuElement.prototype.hide = function(){
  
    if (this.el)
    this.el.style.display = "none";
  
    return this;
  };

  MenuElement.prototype.show = function(){

    if (this.el)
    this.el.style.display = "block";
  
    return this;
  };

  MenuElement.prototype.active = function(){

    if (this.el)
    this.el.className = "activeTab";
  
    return this;
  
  };

  MenuElement.prototype.deActive = function(){

    if (this.el)
    this.el.className = "";
  
    return this;
  };
  
  //return only obj with create method to use it without new keyword
  return {
    create: function(id){      
      return new MenuElement(id);
    }
  };
  
}();

//USE EXAMPLE - the same like in question snippet
ME.create("component_projector_askforproduct").hide();
ME.create("askforproduct_58676").deActive();
ME.create("longdescription_58676").deActive();
ME.create("opinions_58676").active();
ME.create("component_projector_opinions").show();
ME.create("component_projector_opinions_add").show();

//USE EXAMPLE MANY TIMES ON ONE ELEMENT - ONLY EXAMPLE PURPOSES
var element = ME.create("component_projector_askforproduct");
var toggle = true;
setInterval(function(){
   
   if (toggle)
   element.show().active(); //chaining example
   else
     element.deActive().hide();
  
   toggle = !toggle;
  
},1000);

＆＃13;

div.activeTab {
     font-weight: bold;
     color: red;
 }

＆＃13;

<div id="component_projector_askforproduct">
component_projector_askforproduct
</div>
<div id="askforproduct_58676">
askforproduct_58676
</div>
<div id="longdescription_58676">
longdescription_58676
</div>
<div id="opinions_58676">
opinions_58676
</div>
<div id="component_projector_opinions">
component_projector_opinions
</div>
<div id="component_projector_opinions_add">
component_projector_opinions_add
</div>

＆＃13;

Answer 6

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

如何优化此代码段？

6 个答案: