在使用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