Question

我正在尝试创建一个可以用一些变量动态创建的调试器。左侧div上的名称需要显示相应变量描述，变量ID和初始值的div以及将在以后更新变量时显示历史记录和锁定状态的另一个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

在使用DOM / js / css时隐藏/显示div很麻烦

1 个答案: