0

我的页面上有一个 div 元素（“ main”），其内容在两个不同的屏幕之间来回变化（它们的 id 是“ readout”和“ num”），其内容存储为隐藏的 div 元素（使用display:none）。每个屏幕都有一个按钮，该按钮设置main为另一个隐藏的 div。

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

<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()and 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>
4

1 回答 1

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');
}

演示：http://jsfiddle.net/CUgqh/

说明：

如果你想要一些内容 insode #main，你应该把它放在里面（隐藏或显示）。然后，我们.screen用#main>.screen{display:none;}except .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到当前显示的元素，因此它消失了。
  • 它将 1 添加到current（如果它是最后一个els' 元素，则变为 0
  • 它将类添加show到当前元素，因此它出现了。
于 2012-09-08T00:27:05.147 回答