Question

想知道是否有人可以告诉我我在俯瞰什么。我写了以下javascript代码来控制9个菜单按钮。当您单击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";
}

}

编辑：不知道为什么它不让我发布整个HTML代码，但这里是一个带有信息的测试网站的链接。 http://plentyoftales.com/vegas/Pages/testing.html

Answer 1

Eureka !!

好的，对于那些在家中随行的人或那些在将来偶然发现这个问题的人来寻找解决方案（我强调解决方案＆＃39;因为毫无疑问，另一种方式可以实现这一目标），这是问题和解决方案。我会尽力保持简短易懂。

在我的原始代码中，我试图通过在一个函数中执行所有操作来保持函数的简单性。在这样做时，我偶然发现了一个问题，即函数的for循环依赖于具有最少数量的数组项的类。

在我的情况下，我使用了9个主要按钮，这些按钮有几个＆＃39; sub＆＃39;每个主要＆＃39;下面的按钮按钮。主按钮下的每个子按钮集合都有一个独特的CSS类，我试图调整显示样式（从无到块或反之亦然）。（fyi按钮很容易成为div或其他元素）。

所以基本上如果我有几个主按钮部分，一个有6个子按钮，另一个有3个子按钮，一个有5个子按钮，另一个有4个子按钮...... for循环将停在3个循环，因此永远不会显示任何超过3的按钮。即使你告诉循环运行到1000，它也永远不会超过3。

我不确定为什么会这样，我只是意识到for循环停在了最少数量的课程项目上。顺便说一句，如果我在所有部分中都有相同数量的子按钮，那么它运行没有问题。

因此，解决方案是为每个子按钮类创建一个具有自己的for循环的函数。另一个用于打开当前点击的按钮部分。然后为了简化函数的调用，我创建了一个调用所有其他函数的函数。不像我最初想要或想到的那么简单，但它比调用所有元素ID号并以这种方式执行更简单。

更重要的是它有效。

这是修改后的javascript代码：

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>

Javascript按钮代码只能部分工作

1 个答案: