Javascript按钮代码只能部分工作
Javascript button code only partially working
想知道是否有人能告诉我我忽略了什么。我编写了以下控制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";
}
}
编辑：不知道为什么不让我发布整个html代码，但这里有一个链接到一个包含信息的测试网站。http://plentyoftales.com/vegas/Pages/testing.html
尤里卡
好吧，对于那些在家里追随的人，或者那些在未来偶然发现这一点并寻求解决方案的人（我强调"解决方案"，因为毫无疑问还有一两种方法可以实现这一点），以下是问题和解决方案。我会尽我所能保持简短易懂。
在我最初的代码中，我试图通过在一个函数中执行所有操作来保持函数的简单性。在这样做的时候，我偶然发现了一个问题，函数的for循环紧紧抓住了数组项数最少的类。
在我的例子中，我使用了9个主按钮，每个"主"按钮下都有几个"子"按钮。主按钮下的每个子按钮集合都有其唯一的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>
相关文章：
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JS可以在Chrome中工作，但不能在Firefox中工作
- javascript扫雷器floodfill算法不能正常工作
- JavaScript指令不能像我想象的那样工作
- Facebook登录按钮没有'不能在Firefox上工作
- 你能解释一下这个阶乘函数是如何工作的吗?
- jQuery Datepicker可以在Safari中工作，但不能在FF或Chrome中工作
- javascript没有´我不能在joomla 3.0中工作
- 用javascript将script元素附加到头部;铬不能工作
- jQuery函数不能只在一个页面上工作
- 为什么这个代码不能正常工作
- 为什么jquery悬停在jsfiddle中可以工作，而在我的html布局中却不能
- 为什么我的JavaScript在Safari上的严格模式下不能正常工作
- DIV怎么能像Javascript中的另一个元素一样工作呢
- 为什么Turbolinks不能正常工作?Rails应用程序
- jQuery dosn'内联函数不能按预期工作
- 用户名输入如果其他块不能正常工作/Javascript-jQuery-AJAX
- 为什么jQuery代码段在没有IFrame的情况下可以工作，而在有IFrame时却不能工作
- 为什么当async标志设置为false时，xmlhttprequest中的代码可以工作，而当它设置为true时却不能工作
