0

私はJavaScriptにかなり慣れていません.Webサイトのフォームを作成しようとしていますが、JavaScriptにこだわっています.これは私が持っているものです:

<script type="text/javascript">
function hide(opt) {
if (getElementsByClassName(opt).style.display='none';){
getElementsByClassName(opt).style.display='block';
}
else{
getElementsByClassName(opt).style.display='none';
    }
}
</script>

私がスクリプトに意図したことは、変数 (ユーザーが選択したオプション) を受け取り、同じ名前のクラスを持つすべての要素を明らかにすることでした (したがって、オプションが orc の場合、orc div は表示されますが、選択されたオプションは elf などでした) Html:

<form name="chargen" action="" method="post"> 
Name:<Input name="name" type="text" />

Gender:<select name="gender"> 
<option>Choose Gender...</option>
<option>Male</option>
<option>Female</option>
</select>

Species:<select name="species" onchange="hide(document.chargen.species.options[
document.chargen.species.selectedIndex ].value)">
<option> Choose Species...</option>
<option value="human">Human</option>
<option value="orc">Orc</option>
<option value="elf">Elf</option>
<option value="dwarf">Dwarf</option>
<option value="drow">Drow</option>
<option value="ent">Ent</option>
</select>

<div class="human" style="display:none;">
Sub Species:<select name="subspecies1">
<option>Norseman</option>
<option>Hellenic</option>
<option>Heartlander</option>
</select>
</div>

<div class="orc" style="display:none;">
Sub Species:<select name="subspecies2">
<option>Black Orc</option>
<option>Fel Orc</option>
<option>Green Orc</option>
</select>
</div>

<div class="human" style="display:none;">
 Homeland:<select name="homeland1">
<option>Choose Homeland...</option>
<option value="citadel">Citadel</option>
<option value="wildharn">Wildharn</option>
<option value="Merith">Merith</option>
</select>
</div>

<div class="orc" style="display:none;">
Homeland:<select name="homeland2">
<option>Choose Homeland...</option>
<option value="1">Berherak</option>
<option value="2">Vasberan</option>
</select>
</div>

残念ながら、種のコンボボックスの内容を変更しても何も起こりません (複数のブラウザーで試しました)。何が間違っていますか? getElementsByClassName() が HTML5 関数であることは認識していますが、interwebs によると、すべての主要なブラウザーと互換性があります。御時間ありがとうございます

4

1 に答える 1

1

getElementsByClassName配列を返します。結果を反復処理する必要があります。=そして、（の代わりに）テストに注意して==ください。

しかし、 jqueryをご覧になることをお勧めします。あなたが望むことを次のように行うことができるので、あなたの人生はより簡単になります：

$('.human, .orc, .elf, .dwarf, .drow, .ent').hide();
$('.'+opt).show();

（フィドルを参照：http：//jsfiddle.net/dystroy/2GmZ3/）

于 2012-06-19T07:53:09.900 に答える