0

さて、明らかに私はjavascriptが初めてです。ラジオ ボタンを使用してクラスごとに div を非表示にしようとしています。単一のラジオをクリックすると、クラス名が「p12」または「p34」のすべての div を関数で非表示にする必要があります。

しかし

これはすべてのp12 divでのみ機能します....両方を作成するには何が欠けていますか?..

if (document.getElementById('numbofextras0').checked == true) {
    for(i=0; i<100; i++) 
        document.getElementsByClassName('p12')[i].style.display = 'none';

    for(i=0; i<100; i++) 
        document.getElementsByClassName('p34')[i].style.display = 'none';
}
4

3 に答える 3

2

戻り値の範囲外に出たくない場合でも驚かないでしょうgetElementsByClassName（ただし、何が起こるかをテスト/確認していません）。最初に結果を保存してから、それらをループしてみてください。

var p12s = document.getElementsByClassName('p12');
for (var i = 0; i < p12s.length; i++) {
    p12s[i].style.display = "none";
}

var p34s = document.getElementsByClassName('p34');
for (var i = 0; i < p34s.length; i++) {
    p34s[i].style.display = "none";
}

100このようにして、それぞれが返す正確な量の要素 (ハードコードを持っていない) をループしgetElementsByClassNameます。

主な問題は、ハードコーディング100すると常に 0 から 99 までループすることです。getElementsByClassName返される要素が 100 未満の場合、そのインデックスにアクセスしようとすると undefined が返され、次のようなことをしようとすると例外がスローされます.style.display = "none";。または、160 個の要素が返された場合はどうなるでしょうか。最初の 100 のみが変更されます。ループの前に呼び出しを行い、返された要素を変数に格納してから、その長さをループするのが安全で正しい方法です。以前の方法では、getElementsByClassNameループの反復ごとに を呼び出していました。非常に非効率的です。1 回だけで済みます!...そしてもちろん、ハードコーディングも必要です。100要素をループする最良の方法ではありませんでした。それはすべて正しいアイデアでしたが、正しい順序ではありませんでした。つまり、技術的には、次のようなことができたはずです。

for (i=0; i<100; i++) {
    var el = document.getElementsByClassName('p12')[i];
    if (el) {
        el.style.display = 'none';
    }
}

しかし、私が言ったようにgetElementsByClassName、すべてのループ反復で呼び出すのはあまり効率的ではありません。

于 2012-10-30T17:49:43.023 に答える
1

querySelectorAll代わりに使用することを検討してくださいgetElementsByClassName

document.querySelectorAll(".p12, .p34")

気になる場合、これは古いブラウザーでは機能しません。ただし、そうする場合は、バニラJSよりもjQueryまたは同様のものをお勧めします.

于 2012-10-30T17:55:55.147 に答える
-1

このコードを試してください：

if (document.getElementById('numbofextras0').checked == true) {
          var elems=document.getElementsByClassName('p12 p34')
          for(i=0; i<elems.length; i++) 
             elems[i].style.display='none';
        }
于 2012-10-30T17:56:30.060 に答える