Javascriptのボタンコードは部分的にしか動作しません

Question

誰かが私が見落としていることを教えてくれるかもしれないと思っています。私は9つのメニューボタンを制御する次のJavaScriptコードを書いた。 9つのボタンのそれぞれをクリックすると、選択したボタンの下にサブメニューボタンが表示されます。別のメインメニューボタンをクリックすると、前のサブメニューボタンが閉じる（消えます）と新しいサブメニューボタンが表示されます。基本的にはアコーディオンのメニュータイプです。

私は何を試しても2つのサブメニューボタンしか表示されないことを除いて、すべてがうまくいくようです。なぜすべてのメニューが表示されないのかわかりません。

注：私は、これはjQueryを使って簡単に行うことができる知っているが、私は試してみると私のjavascriptを練習したかった、私は少しさびです。

コード：

function SubMenu(Sub_Class_Name) { 
var Z = document.getElementsByClassName(Sub_Class_Name); 
var A = document.getElementsByClassName('tips_button0'); 
var B = document.getElementsByClassName('tips_button1'); 
var C = document.getElementsByClassName('tips_button2'); 
var D = document.getElementsByClassName('tips_button3'); 
var E = document.getElementsByClassName('tips_button4'); 
var F = document.getElementsByClassName('tips_button5'); 
var G = document.getElementsByClassName('tips_button6'); 
var H = document.getElementsByClassName('tips_button7'); 
var I = document.getElementsByClassName('tips_button8'); 
var X ; 
    for (X=0; X < Z.length; X++) { 
if (A.item(X).style.display == 'block') { 
    A.item(X).style.display = 'none'; 
} 
if (B.item(X).style.display == 'block') { 
    B.item(X).style.display = 'none'; 
} 
if (C.item(X).style.display == 'block') { 
    C.item(X).style.display = 'none'; 
} 
if (D.item(X).style.display == 'block') { 
    D.item(X).style.display = 'none'; 
} 
if (E.item(X).style.display == 'block') { 
    E.item(X).style.display = 'none'; 
} 
if (F.item(X).style.display == 'block') { 
    F.item(X).style.display = 'none'; 
} 
if (G.item(X).style.display == 'block') { 
    G.item(X).style.display = 'none'; 
} 
if (H.item(X).style.display == 'block') { 
    H.item(X).style.display = 'none'; 
} 
if (I.item(X).style.display == 'block') { 
    I.item(X).style.display = 'none'; 
} 

    Z.item(X).style.display = "block"; 
} 

}

EDIT：その私は全体のhtmlコードをポストさせるが、ここでの情報とテストサイトへのリンクのない理由はわかりません。 http://plentyoftales.com/vegas/Pages/testing.html

Answer 1

ユーレカ!!

[OK]を、自宅に沿って、または解決策を探して、将来的にこの全体につまずく人のために、次の人のため（とは間違いないが、これを達成するための別の方法または2があるので、私は「ソリューション」を強調する）、ここに問題と解決策があります。私は短く理解できるように最善を尽くします。

私の元のコードでは、関数をすべて1つの関数で単純にしていました。そうすることで、配列項目の数が最も少ないクラスに突っ込んでいる関数のforループの問題を見つけました。

私の場合は、それぞれのメインボタンの下にいくつかの「サブ」ボタンがある9つのメインボタンを使用していました。メインボタンの下にある各サブボタンは、表示スタイルを調整しようとしていたユニークなCSSクラスを持っていました。 （fyiボタンは簡単にdivや別の要素にすることができます）。

だから、基本的に、私はforループ....いくつかの主要なボタン部6つのサブボタンを有するもの、3個のサブボタン、5つのサブボタンを有するもの、及び4つのサブボタンで相互に別のものを持っていた場合に3つのループで停止します、したがって、私は正確に理由があるか分からないあなたは1000年に実行するループを告げたとしても、それは過去3

に行くことはない3以上のいずれかのボタンを示したことがない、私はちょうどループのために停止したことに気づきましたクラス項目の最小数。私はすべてのセクションで同じ数のサブボタンを持っていれば、問題なく走った。

解決策は、それ自身のforループを持つ関数をサブボタンの各クラスに対して作成することです。また、現在のクリックされたボタンのセクションを開くためのものもあります。次に、関数の呼び出しを単純化するために、私は他の関数をすべて呼び出す関数を作成しました。私が最初に思っていたか思っていたほど単純ではありませんでしたが、すべての要素ID番号を呼び出してそのようにするのはまだ簡単です。

もっと重要なのは、それが機能することです。

function closeALL (Sub_Class_Name) { 
close0(); 
close1(); 
close2(); 
close3(); 
close4(); 
close5(); 
close6(); 
close7(); 
close8(); 
SubMenu(Sub_Class_Name); 
} 
function close0() { 
var A = document.getElementsByClassName('tips_button0'); 
var length = A.length; 
var X 
    for (X=0; X < length; X++) { 
     A[X].style.display = 'none'; 
    } 
} 
function close1() { 
var B = document.getElementsByClassName('tips_button1'); 
var length = B.length; 
var X 
    for (X=0; X < length; X++) { 
     B[X].style.display = 'none'; 
    } 
} 
function close2() { 
var C = document.getElementsByClassName('tips_button2'); 
var length = C.length; 
var X 
    for (X=0; X < length; X++) { 
     C[X].style.display = 'none'; 
    } 
} 
function close3() { 
var D = document.getElementsByClassName('tips_button3'); 
var length = D.length; 
var X 
    for (X=0; X < length; X++) { 
     D[X].style.display = 'none'; 
    } 
} 
function close4() { 
var E = document.getElementsByClassName('tips_button4'); 
var length = E.length; 
var X 
    for (X=0; X < length; X++) { 
     E[X].style.display = 'none'; 
    } 
} 
function close5() { 
var F = document.getElementsByClassName('tips_button5'); 
var length = F.length; 
var X 
    for (X=0; X < length; X++) { 
     F[X].style.display = 'none'; 
    } 
} 
function close6() { 
var G = document.getElementsByClassName('tips_button6'); 
var length = G.length; 
var X 
    for (X=0; X < length; X++) { 
     G[X].style.display = 'none'; 
    } 
} 
function close7() { 
var H = document.getElementsByClassName('tips_button7'); 
var length = H.length; 
var X 
    for (X=0; X < length; X++) { 
     H[X].style.display = 'none'; 
    } 
} 
function close8() { 
var I = document.getElementsByClassName('tips_button8'); 
var length = I.length; 
var X 
    for (X=0; X < length; X++) { 
     I[X].style.display = 'none'; 
    } 
} 

function SubMenu(Sub_Class_Name) { 
var Z = document.getElementsByClassName(Sub_Class_Name); 
var X ; 
    for (X=0; X < Z.length; X++) { 
    Z[X].style.display = "block" 
} 

} 

ここで改訂されたhtmlコードです：ここで

は、改訂されたJavaScriptコードです？

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 

<style type='text/css'> 
.tips_buttonholder { 
    padding: 20px; 
    float: left; 
    height: 500px; 
    width: 135px; 
    margin-right: 20px; 
    background-color: #FFF; 
    border-radius: 15px; 
} 
.tips_buttons { 
    float: left; 
    width: 135px; 
    margin-bottom: 10px; 
} 

.tips_button0 { 
    float: left; 
    width: 115px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
    display: none; 
} 
.tips_button1 { 
    float: left; 
    width: 115px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
    display: none; 
} 
.tips_button2 { 
    float: left; 
    width: 115px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
    display: none; 
} 
.tips_button3 { 
    float: left; 
    width: 115px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
    display: none; 
} 
.tips_button4 { 
    float: left; 
    width: 115px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
    display: none; 
} 
.tips_button5 { 
    float: left; 
    width: 115px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
    display: none; 
} 
.tips_button6 { 
    float: left; 
    width: 115px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
    display: none; 
} 
.tips_button7 { 
    float: left; 
    width: 115px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
    display: none; 
} 
.tips_button8 { 
    float: left; 
    width: 115px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
    display: none; 
} 
</style> 

<script> 

function closeALL (Sub_Class_Name) { 
    close0(); 
    close1(); 
    close2(); 
    close3(); 
    close4(); 
    close5(); 
    close6(); 
    close7(); 
    close8(); 
    SubMenu(Sub_Class_Name); 
} 

function close0() { 
    var A = document.getElementsByClassName('tips_button0'); 
    var length = A.length; 
    var X 
     for (X=0; X < length; X++) { 
      A[X].style.display = 'none'; 
     } 
} 
function close1() { 
    var B = document.getElementsByClassName('tips_button1'); 
    var length = B.length; 
    var X 
     for (X=0; X < length; X++) { 
      B[X].style.display = 'none'; 
     } 
} 
function close2() { 
    var C = document.getElementsByClassName('tips_button2'); 
    var length = C.length; 
    var X 
     for (X=0; X < length; X++) { 
      C[X].style.display = 'none'; 
     } 
} 
function close3() { 
    var D = document.getElementsByClassName('tips_button3'); 
    var length = D.length; 
    var X 
     for (X=0; X < length; X++) { 
      D[X].style.display = 'none'; 
     } 
} 
function close4() { 
    var E = document.getElementsByClassName('tips_button4'); 
    var length = E.length; 
    var X 
     for (X=0; X < length; X++) { 
      E[X].style.display = 'none'; 
     } 
} 
function close5() { 
    var F = document.getElementsByClassName('tips_button5'); 
    var length = F.length; 
    var X 
     for (X=0; X < length; X++) { 
      F[X].style.display = 'none'; 
     } 
} 
function close6() { 
    var G = document.getElementsByClassName('tips_button6'); 
    var length = G.length; 
    var X 
     for (X=0; X < length; X++) { 
      G[X].style.display = 'none'; 
     } 
} 
function close7() { 
    var H = document.getElementsByClassName('tips_button7'); 
    var length = H.length; 
    var X 
     for (X=0; X < length; X++) { 
      H[X].style.display = 'none'; 
     } 
} 
function close8() { 
    var I = document.getElementsByClassName('tips_button8'); 
    var length = I.length; 
    var X 
     for (X=0; X < length; X++) { 
      I[X].style.display = 'none'; 
     } 
} 

function SubMenu(Sub_Class_Name) { 
    var Z = document.getElementsByClassName(Sub_Class_Name); 
    var X ; 
     for (X=0; X < Z.length; X++) { 
     Z[X].style.display = "block" 
    } 

} 
</script> 
</head> 

<body> 
<div class="tips_buttonholder"> 
<!-- SECTION 4 START --> 
    <button id="main4" class="tips_buttons" type="button" onClick="closeALL('tips_button4'); ">HEALTH</button> 

     <button class="tips_button4" type="button" onClick="">SubButton</button> 
     <button class="tips_button4" type="button" onClick="">SubButton</button> 
     <button class="tips_button4" type="button" onClick="">SubButton</button> 
<!-- SECTION 4 END --> 
<!-- SECTION 5 START --> 
    <button id="main5" class="tips_buttons" type="button" onClick="closeALL('tips_button5'); ">FOOD</button> 

     <button class="tips_button5" type="button" onClick="">Discount Apps</button> 
     <button class="tips_button5" type="button" onClick="">Buffets</button> 
     <button class="tips_button5" type="button" onClick="">SubButton</button> 
<!-- SECTION 5 END --> 
<!-- SECTION 0 START --> 
    <button id="main0" class="tips_buttons" type="button" onClick="closeALL('tips_button0'); ">COMFORT</button> 

     <button class="tips_button0" type="button" onClick="">SubButton</button> 
     <button class="tips_button0" type="button" onClick="">SubButton</button> 
<!-- SECTION 0 END -->  
<!-- SECTION 1 START --> 
    <button id="main1" class="tips_buttons" type="button" onClick="closeALL('tips_button1'); ">MONEY</button> 

     <button class="tips_button1" type="button" onClick="">Airport Rides</button> 
     <button class="tips_button1" type="button" onClick="">Email Clubs</button> 
     <button class="tips_button1" type="button" onClick="">Haggle</button>  

<!-- SECTION 1 END -->  
<!-- SECTION 2 START --> 
    <button id="main2" class="tips_buttons" type="button" onClick="closeALL('tips_button2'); ">TOURNAMENT</button> 

     <button class="tips_button2" type="button" onClick="">SubButton</button> 
     <button class="tips_button2" type="button" onClick="">SubButton</button> 

<!-- SECTION 2 END --> 
<!-- SECTION 3 START --> 
    <button id="main3" class="tips_buttons" type="button" onClick="closeALL('tips_button3'); ">GAMBLING</button> 

     <button class="tips_button3" type="button" onClick="">SubButton</button> 
     <button class="tips_button3" type="button" onClick="">SubButton</button> 
     <button class="tips_button3" type="button" onClick="">SubButton</button> 
<!-- SECTION 3 END --> 
<!-- SECTION 6 START --> 
    <button id="main6" class="tips_buttons" type="button" onClick="closeALL('tips_button6'); ">SITE SEEING</button> 

     <button class="tips_button6" type="button" onClick="">Discount Apps</button> 
     <button class="tips_button6" type="button" onClick="">Power Pass</button> 
     <button class="tips_button6" type="button" onClick="">SubButton</button> 
<!-- SECTION 6 END --> 
<!-- SECTION 7 START --> 
    <button id="main7" class="tips_buttons" type="button" onClick="closeALL('tips_button7'); ">SHOPPING</button> 

     <button class="tips_button7" type="button" onClick="">Discount Apps</button> 
     <button class="tips_button7" type="button" onClick="">SubButton</button> 
     <button class="tips_button7" type="button" onClick="">SubButton</button> 
<!-- SECTION 7 END --> 
<!-- SECTION 8 START --> 
    <button id="main8" class="tips_buttons" type="button" onClick="closeALL('tips_button8'); ">ENTERTAINMENT</button> 
    <button class="tips_button8" type="button" onClick="">Discount Apps</button> 
     <button class="tips_button8" type="button" onClick="">Power Pass</button> 
     <button class="tips_button8" type="button" onClick="">SubButton</button> 
    <button class="tips_button8" type="button" onClick="">Discount Apps</button> 
     <button class="tips_button8" type="button" onClick="">Power Pass</button> 
     <button class="tips_button8" type="button" onClick="">SubButton</button> 
<!-- SECTION 8 END --> 
    </div> 
</body> 
</html>