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

Question

我正在尝试制作一个调试器，它将使用一些变量动态创建。左边的名称div需要显示一个对应变量Description、Variable ID、initial Value的div，以及后面更新变量时显示history和lock status的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";
    }

Answer 1

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