Question

我的网页上有一个div元素（“main”），其内容在两个不同的屏幕之间来回变换（其ID为“readout”和“num”），其内容存储为隐藏的div元素（使用display:none）。每个屏幕都有一个按钮，可以将main设置为另一个隐藏的div。

由于我努力让num.innerHTML加载到main，我最终将num（具有不同的表单名称）几乎相同的内容放入main：

<p>Number of Passengers per Carriage:</p>
<form method="post" action="javascript:void(0);" name="applesForm" onSubmit="setPassengers();">

<input type="text" name="numApples" id="numPassengers" />

<br/><br/>
<input type="submit" name="Submit" value="OK!"/>
</form>

setPassengers()成功将main的内容设置为readout。 readout成功将main的内容设置为num（几乎与main的原始内容相同）。但那时它不会再回过头了。

以下是setPassengers()和setPassengersAgain()，它们是相同的，但是对于不同的表单名称：

function setPassengers()
    {
            passengers=document.applesForm.numPassengers.value;

            document.getElementById('main').innerHTML=readout.innerHTML;
        }

        function setPassengersAgain()
        {
            passengers=document.applesFormAgain.numPassengers.value;

            document.getElementById('main').innerHTML=readout.innerHTML;
        }

所以我的问题是： 1）为什么num不能更改为readout？ 2）有没有办法在页面加载时直接加载num以简化代码？

编辑：我可以使用onload，这意味着num是唯一被打破的位......

编辑2：这是隐藏的div：

<div id="readout" style="display:none">
<p>Throughput per hour:</p>
<p id="output">--</p>

<p>Average Dispatch Time:</p>
<p id="avDisTime">--</p>

<form method="post" action="javascript:void(0);" name="dispatchForm" onSubmit="dispatch();i++;">
<input type="submit" name="Submit" value="Press on Dispatch!"/>
</form>
<br/>

<form method="post" action="javascript:void(0);" name="resetTimesForm" onSubmit="resetTimes();">
<input type="submit" name="Submit" value="Reset Times"/>
</form>

<form method="post" action="javascript:void(0);" name="resetAllForm" onSubmit="resetAll();">
<input type="submit" name="Submit" value="Reset All"/>
</form>
</div>

<!--back to default page-->
<div id="num" style="display:none">

<p>Number of Passengers per Carriage:</p>

<form method="post" action="javascript:void(0);" name="applesFormAgain" onSubmit="setPassengersAgain();">

<input type="text" name="numApples" id="numPassengers" />

<br/><br/>
<input type="submit" name="Submit" value="OK!"/>
</form>

</div>

Answer 1

你没有发布你的HTML代码，所以我不知道它是怎么样的，但你可以使用像：

HTML：

<button id="changeMain">Change #main</button>
<div id="main">
    <div id="readout" class="screen show">
        Readout
    </div>
    <div id="num" class="screen">
        Num
    </div>
</div>

CSS：

#main>.screen{display:none;}
#main>.screen.show{display:block;}

JavaScript的：

var els=[document.getElementById('readout'),document.getElementById('num')],current;
function addClass(el,c){
    var arr=el.className.split(' ');
    if(arr.indexOf(c)>-1){return;}
    arr.push(c);
    el.className=arr.join(' ');
}
function delClass(el,c){
    var arr=el.className.split(' ');
    var i=arr.indexOf(c);
    if(i===-1){return;}
    arr.splice(i,1);
    el.className=arr.join(' ');
}
document.getElementById('changeMain').onclick=function(){
    if(!current){
        for(var i=0,l=els.length;i<l;i++){
            if(els[i].className.indexOf('show')>-1){
                current=i;
                break;
            }
        }
    }
    delClass(els[current],'show');
    current=(current+1)%els.length;
    addClass(els[current],'show');
}

DEMO: http://jsfiddle.net/CUgqh/

<强>解释：

如果你想要一些内容insode #main，你应该把它放在里面（隐藏或显示）。然后，我们将所有.screen隐藏#main>.screen{display:none;}，.screen.show除外：#main>.screen.show{display:block;}。

然后，JavaScript代码：

首先我们创建一个包含元素的数组：

var els=[document.getElementById('readout'),document.getElementById('num')],current;

将一个类c添加/删除到元素el的函数：

function addClass(el,c){
    var arr=el.className.split(' ');
    if(arr.indexOf(c)>-1){return;}
    arr.push(c);
    el.className=arr.join(' ');
}
function delClass(el,c){
    var arr=el.className.split(' ');
    var i=arr.indexOf(c);
    if(i===-1){return;}
    arr.splice(i,1);
    el.className=arr.join(' ');
}

我们为按钮创建了一个事件：

document.getElementById('changeMain').onclick=function(){
    if(!current){
        for(var i=0,l=els.length;i<l;i++){
            if(els[i].className.indexOf('show')>-1){
                current=i;
                break;
            }
        }
    }
    delClass(els[current],'show');
    current=(current+1)%els.length;
    addClass(els[current],'show');
}

上面的代码确实：

如果这是第一次未定义当前els'索引（current），我们会默认搜索哪个元素具有类show。
它将类show移除到当前显示的元素，因此它会消失。
它向current添加1（如果它是最后els'元素则变为0
它将类show添加到当前元素，因此它出现。

innerHTML不会改变元素

1 个答案: