0

ページにdiv要素（ " "）があり、その内容は2つの異なる画面（IDは" "と" "）mainの間で前後に変化し、その内容は非表示のdiv要素として（を使用して）保存されます。各画面には、他の非表示のdivに設定するボタンがあります。readoutnumdisplay:nonemain

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正常に設定します。しかし、その後は読み出しに戻りません。mainnummain

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>
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/

説明：

コンテンツを挿入したい場合は#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現在表示されている要素のクラスが削除されるため、表示されなくなります。
  • に1を追加します（または、最後の'要素currentの場合は0になりますels
  • 現在の要素にクラスを追加するshowので、表示されます。
于 2012-09-08T00:27:05.147 に答える