在使用DOM/js/css时隐藏/显示div的问题

Question

我正在尝试使用一些变量来动态创建一个调试器。左侧div的名称需要显示相应变量说明，变量ID和初始值以及另一个div，以便稍后更新变量时显示历史记录和锁定状态。我遇到麻烦的地方是正确地将show/hide添加到我认为的dom中。一切都开始隐藏，然后当我点击一个名称时，该名称的变量显示出来，但下一次单击不会隐藏前者的值。还有任何清理/优化建议？

<script type="text/javascript"> 
    var variableIDArray = {}; 

    function loadVariables(variables) { 
     if (typeof variables != "object") { alert(variables); return; } 
     var namearea = document.getElementById('namearea'); 
     var description = document.getElementById('description'); 
     var varid = document.getElementById('varid'); 
     var initialvalue = document.getElementById('initialvalue'); 
     var valuelock = document.getElementById('valuelock'); 

     for (var i = 0; i < variables.length - 1; i++) { 

      var nameDiv = document.createElement('div'); 
      nameDiv.id = variables[i].variableID + "namearea"; 
      nameDiv.className = "nameDiv"; 
      nameDiv.onclick = (function (varid) { 
       return function() { showvariable(varid); }; 
      })(variables[i].variableID); 
      nameDiv.appendChild(document.createTextNode(variables[i].name)); 
      namearea.appendChild(nameDiv); 

      var descriptionDiv = document.createElement('div'); 
      descriptionDiv.id = variables[i].variableID + "description"; 
      descriptionDiv.className = "descriptionDiv"; 
      descriptionDiv.appendChild(document.createTextNode("Description : " + variables[i].description)); 
      description.appendChild(descriptionDiv); 

      var varidDiv = document.createElement('div'); 
      varidDiv.id = variables[i].variableID + "varid"; 
      varidDiv.className = "varidDiv"; 
      varidDiv.appendChild(document.createTextNode("Var ID : " + variables[i].variableID)); 
      varid.appendChild(varidDiv); 

      var initialvalueDiv = document.createElement('div'); ; 
      initialvalueDiv.id = variables[i].variableID + "initialvalue"; 
      initialvalueDiv.className = "initialvalueDiv"; 
      initialvalueDiv.appendChild(document.createTextNode("Initial Value : " + variables[i].value)); 
      initialvalue.appendChild(initialvalueDiv); 

      var valuelockDiv = document.createElement('div'); 
      valuelockDiv.id = variables[i].variableID + "valuelock"; 
      valuelockDiv.className = "valuelockDiv "; 
      valuelockDiv.appendChild(document.createTextNode("Value : " + variables[i].value)); 
      valuelockDiv.appendChild(document.createTextNode("Lock : " + variables[i].locked.toString())); 
      valuelock.appendChild(valuelockDiv); 

      variableIDArray[variables[i].variableID]; 
     } 


    }; 
    function showvariable(varid) { 
     for (v in variableIDArray) 
      hide(variableIDArray[v]); 
     show(varid + "description"); 
     show(varid + "varid"); 
     show(varid + "initialvalue"); 
     show(varid + "valuelock"); 
    } 
    function show(elemid) { 
     document.getElementById(elemid).style.display = "block"; 
    } 
    function hide(elemid) { 
     document.getElementById(elemid).style.display = "none"; 
    } 

Answer 1

是的。 jQuery的。将您的代码减少到大约6行。 :) http://jquery.com