Javascript 在使用DOM/js/css时隐藏/显示div时出现问题

我正在尝试制作一个调试器，它将使用一些变量动态创建。左侧div上的名称需要显示对应变量描述、变量ID和初始值的div，以及另一个在以后更新变量时显示历史记录和锁定状态的div。我认为，我遇到的问题是如何正确地将显示/隐藏添加到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";
    }

---

对。jQuery。将代码减少到大约6行：

请建设性地看待这一点：你的大多数答案最好留作评论……这是一个非常笼统的陈述，对OP没有多大帮助。我想我的问题可能在数组中？