麻烦隐藏/显示div使用DOM / js / css [英] Trouble hiding/showing divs in using DOM/js/css

问题描述

我试图做一个调试器，将用一些变量dynamiaclly创建。左侧div上的名称需要显示对应的变量描述，变量ID和初始值的div以及另一个div，当变量以后更新时，将显示历史和锁定状态。我在哪里我有麻烦正确地添加显示/隐藏到dom我认为。一切都开始隐藏，然后当我点击一个名称时，该名称的变量显示，但下一次点击不隐藏前者的值。还有任何清理/优化建议吗？

I am trying to make a debugger that will be dynamiaclly created with some variables. The names on the left div need to show a div for the corresponding variables Description,Variable ID, and initial Value as well as another div that will show history and lock status when variables are updated later. Where I am having trouble is properly adding the show/hide to the dom I think. Everything starts hidden and then when I click a name the Variables for that name show up but the next click doesn't hide the values from the former. Also any cleanup/optimization advice?

<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行。 :) http://jquery.com

Yes. jQuery. Will reduce your code to about 6 lines. :) http://jquery.com

这篇关于麻烦隐藏/显示div使用DOM / js / css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！