자바 스크립트 버튼 코드는 부분적으로 만 작동합니다.

Question

내가 간과하는 것을 누군가가 알 수 있는지 궁금합니다. 나는 9 개의 메뉴 버튼을 제어하는 ​​다음 자바 스크립트 코드를 썼다. 각 9 개의 버튼을 클릭하면 선택한 버튼 아래에 하위 메뉴 버튼이 표시됩니다. 다른 주 메뉴 버튼을 클릭하면 이전 하위 메뉴 버튼이 닫히고 사라집니다. 새 하위 메뉴 버튼이 나타납니다. 기본적으로 아코디언 메뉴 유형입니다.

모든 것이 효과가있는 것 같습니다. 단, 2 개의 하위 메뉴 버튼 만 사용해도 문제가없는 것으로 나타났습니다. 왜 모든 메뉴가 표시되지 않는지 확실하지 않습니다.

참고 : jquery로이 작업을 더 쉽게 수행 할 수 있지만 실험을하고 자바 스크립트를 연습하고 싶었 기 때문에 약간 녹슬 었습니다.

코드 :

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"; 
} 

}

편집 : 그 날 전체 HTML 코드를 게시시키는하지만, 여기에 정보와 테스트 사이트에 대한 링크입니다하지 왜 확실하지. http://plentyoftales.com/vegas/Pages/testing.html

Answer 1

유레카 !!

좋아, 집에서 함께 또는 솔루션을 찾고 앞으로이 우연히 발견하는 사람들을 위해 다음과 같은 사람들을 위해 (그리고 의심의 여지가 이러한 목표를 달성하는 또 다른 방법 또는 두 가지가 있기 때문에 나는 '솔루션'을 강조) 여기에 문제와 해결책이 있습니다. 나는 짧고 이해할 수 있도록 최선을 다할 것입니다.

내 원래 코드에서 모든 기능을 하나의 기능으로 수행하여 기능을 간단하게 유지하려고했습니다. 그렇게함으로써 배열 항목 수가 가장 적은 클래스에 대해 함수의 for 루프 문제를 발견했습니다.

내 경우에는 각 '기본'버튼 아래에 여러 '하위'버튼이있는 9 개의 기본 버튼을 사용했습니다. 기본 버튼 아래에있는 각 하위 버튼에는 고유 한 CSS 클래스가있어서 표시 스타일을 조정하려고했습니다 (아무 것도 선택하지 않거나 그 반대로). (fyi 버튼은 쉽게 div 또는 다른 요소 일 수 있습니다).

기본적으로 6 개의 하위 버튼이있는 메인 버튼 섹션이 하나 있고, 3 개의 하위 버튼이 있고, 5 개의 하위 버튼이있는 버튼과 4 개의 하위 버튼이있는 버튼 버튼이 있습니다. for 루프는 3 개의 루프에서 멈추고, 따라서 3을 초과하는 버튼이 전혀 표시되지 않습니다. 루프를 1000으로 실행한다고해도 3을 넘지는 않습니다.

정확히 왜 그런지는 확실하지 않지만 for 루프가 멈췄다는 것을 깨달았습니다. 클래스 항목의 최소 수 BTW 모든 섹션에서 동일한 수의 하위 단추가 있으면 문제없이 실행됩니다.

그래서 해결책은 하위 버튼의 각 클래스에 대해 자체 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 코드입니다 :

다음은 수정 된 자바 스크립트 코드의

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