0

我的一些按钮没有显示正确的代码。例如; 当我单击 iPhone、iPhone 5S 时，正确的名称显示为 1，例如：“AT&T1”，最后但当我单击 iPhone 5 时，它仍然显示名称以 1 结尾而不是 2，例如：AT&T2，。它也与该行中的其他按钮一起执行此操作。当我想将另一组按钮添加到相同或不同的按钮时，有人可以向我解释我必须做什么吗？

<!DOCTYPE html>
<html>
<table>
<td>
<a href="#" onclick="javascript:showHide(1);"><button>iPhone</button></a>
<a href="#" onclick="javascript:showHide(2);"><button>Cell Phone</button></a>
<a href="#" onclick="javascript:showHide(3);"><button>iPad</button></a>
<a href="#" onclick="javascript:showHide(3);"><button>iPod</button></a>
<a href="#" onclick="javascript:showHide(4);"><button>Tablet</button></a>
<a href="#" onclick="javascript:showHide(5);"><button>Macbook</button></a>
<a href="#" onclick="javascript:showHide(6);"><button>Mac</button></a>
</td>
</table>

<div id="level1item1" style="display: none;">

<button onclick="subShowHide('1');">iPhone 5S</button>
<button onclick="subShowHide('1');">iPhone 5</button>
<button onclick="subShowHide('1');">iPhone 4S</button>
<button onclick="subShowHide('1');">iPhone 4</button>
<button onclick="subShowHide('1');">iPhone 3GS</button>
 <button onclick="subShowHide('1');">iPhone 3</button>

</div>

<div id="level1item2" style="display: none;">
<button>HTC</button>
<button>Nokia</button>
<button>Motorola</button>
<button>Blackberry</button>
<button>Samsung</button>
<button>LG</button>
</div>

<div id="level1item3" style="display: none;">
<button>iPad Mini</button>
<button>iPad 4th Generation</button>
<button>iPad 3rd Generation</button>
<button>iPad 2nd Generation</button>
<button>iPad 1st Generation</button>
</div>

<div id="level1item4" style="display: none;">
<button>Apple</button>
<button>Amazon</button>
<button>Asus</button>
<button>Google</button>
<button>Microsoft</button>
<button>Samsung</button>
</div>

<div id="level1item5" style="display: none;">
<button>Macbook</button>
<button>Macbook Air</button>
<button>Macbook Pro</button>
</div>
<div id="level1item6" style="display: none;">
<button>iMac</button>
<button>Mac Mini</button>
<button>Mac Pro</button>
</div>

<div id="level1item7" style="display: none;">
<button>Touch</button>
<button>Nano</button>
<button>Classic</button>
</div>

<div id="level2item1" style="display: none;" name="iphone5S">
<button onclick="subSubShowHide('1');">AT&T1</button>
<button onclick="subSubShowHide('1');">Sprint1</button>
<button onclick="subSubShowHide('1');">Verizon1</button>
<button onclick="subSubShowHide('1');">T-Mobile1</button>
<button onclick="subSubShowHide('1');">Unlocked1</button>
<button onclick="subSubShowHide('1');">Other1</button>
</div>

<div id="level2item2" style="display: none;" name="iphone5">
<button onclick="subSubShowHide('1');">AT&T2</button>
<button onclick="subSubShowHide('1');">Sprint2</button>
<button onclick="subSubShowHide('1');">Verizon2</button>
<button onclick="subSubShowHide('1');">T-Mobile2</button>
<button onclick="subSubShowHide('1');">Unlocked2</button>
<button onclick="subSubShowHide('1');">Other2</button>
</div>

<div id="level2item2" style="display: none;" name="iphone4S">
<button onclick="subSubShowHide('1');">AT&T3</button>
<button onclick="subSubShowHide('1');">Sprint13</button>
<button onclick="subSubShowHide('1');">Verizon3</button>
<button onclick="subSubShowHide('1');">T-Mobile3</button>
<button onclick="subSubShowHide('1');">Unlocked3</button>
<button onclick="subSubShowHide('1');">Other3</button>
</div>

<div id="level2item1" style="display: none;" name="iphone4">
<button onclick="subSubShowHide('1');">AT&T4</button>
<button onclick="subSubShowHide('1');">Sprint4</button>
<button onclick="subSubShowHide('1');">Verizon4</button>
<button onclick="subSubShowHide('1');">T-Mobile4</button>
<button onclick="subSubShowHide('1');">Unlocked4</button>
<button onclick="subSubShowHide('1');">Other4</button>
</div>

<div id="level2item4" style="display: none;" name="iphone3gs">
<button onclick="subSubShowHide('1');">AT&T4</button>
<button onclick="subSubShowHide('1');">Unlocked4</button>
</div>

<div id="level2item5" style="display: none;" name="iphone3">
<button onclick="subSubShowHide('1');">AT&T5</button>
<button onclick="subSubShowHide('1');">Unlocked5</button>
</div>

<div id="level2item1" style="display: none;" name="iphone5S">
<button onclick="subSubShowHide('1');">AT&T6</button>
<button onclick="subSubShowHide('1');">Sprint6</button>
<button onclick="subSubShowHide('1');">Verizon6</button>
<button onclick="subSubShowHide('1');">T-Mobile6</button>
<button onclick="subSubShowHide('1');">Unlocked6</button>
<button onclick="subSubShowHide('1');">Other6</button>
</div>

<div id="level3item1" style="display: none;" name="at&t1">
<button onclick="subSubShowHide('1');">Apple iPhone 5S 16GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 5S 32GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 5S 64GB (AT&T)</button>
</div>

<div id="level3item2" style="display: none;" name="sprint1">
<button onclick="subSubShowHide('1');">Apple iPhone 5 16GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 5 32GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 5 64GB (AT&T)</button>
</div>

<div id="level3item3" style="display: none;" name="verizon1">
<button onclick="subSubShowHide('1');">Apple iPhone 4S 16GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 4S 32GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 4S 64GB (AT&T)</button>
</div>

<div id="level3item1" style="display: none;" name="t-mobile1">
<button onclick="subSubShowHide('1');">Apple iPhone 4 8GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 4 16GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 4 32GB (AT&T)</button>
</div>

<div id="level3item2" style="display: none;" name="unlocked1">
<button onclick="subSubShowHide('1');">Apple iPhone 3GS 8GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 3GS 16GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 3GS 32GB (AT&T)</button>
</div>

<div id="level3item3" style="display: none;" name="other1">
<button onclick="subSubShowHide('1');">Apple iPhone 3 8GB (AT&T)</button>
<button onclick="subSubShowHide('1');">Apple iPhone 3 16GB (AT&T)</button>
</div>

<script>
function showHide(obj) {
for(i=1;i<=1;i++){
    document.getElementById('qq'+i).style.display = 'none';
}
for(i=1;i<=1;i++){
    document.getElementById('qqq'+i).style.display = 'none';
}
for(i=1;i<=4;i++){
    if (i == obj) {
        document.getElementById('q'+i).style.display = 'block';
    } else {
        document.getElementById('q'+i).style.display = 'none';
    }
}
return false;
}
function subShowHide(obj){
for(i=1;i<=1;i++){
    document.getElementById('qqq'+i).style.display = 'none';
}
for(i=1;i<=1;i++){
    if (i == obj) {
        document.getElementById('qq'+i).style.display = 'block';
    } else {
        document.getElementById('qq'+i).style.display = 'none';
    }
}
return false;
}
function subSubShowHide(obj){
for(i=1;i<=1;i++){
    if (i == obj) {
        document.getElementById('qqq'+i).style.display = 'block';
    } else {
        document.getElementById('qqq'+i).style.display = 'none';
    }
}
return false;
}
</script>

</html>

http://jsbin.com/ITINowI/1/edit

4

2 回答 2

1

html 元素的 ID 属性应该是唯一的，您有多个具有相同 id 的 div，level1item1因此当您选择 divJS或选择jquery第一个具有 id 的 div 时，您会看到这种行为尝试使用 class 属性分配多个 div

萨内为level1item2,level1item3,level1item4,level1item5,level1item6 ....

于 2013-08-24T20:40:24.737 回答
1

你的 HTML 是一团糟：

  • 您不应该为此使用 table，而是使用 UL (list)
  • 表必须有行，你跳过 TR 元素
  • 您不应该在锚点内使用按钮
  • onclick 应该在您的按钮元素上，而不是在锚点上
  • 内联“onclick”属性不需要伪“javascript:”信息

尽管存在所有这些问题，您的代码应该指向每个 subMenuID：

<button onclick="subShowHide('1');">iPhone 5S</button>
<button onclick="subShowHide('2');">iPhone 5</button>
<button onclick="subShowHide('3');">iPhone 4S</button>
<button onclick="subShowHide('4');">iPhone 4</button>
<button onclick="subShowHide('5');">iPhone 3GS</button>
 <button onclick="subShowHide('6');">iPhone 3</button>

您的 javascript 必须为这些 ID 进行交互，FOR 仅在第一个循环中循环 (i=1;i<=1;i++)

在这里修复一点，但我看到你剪切并粘贴了很多代码，重复相同的 ID，并且你的 subSubMenus 在 HTML 中配置错误，每个项目都应该有一个正确的指向 subID（都指向 ID 1）

于 2013-08-24T20:57:24.517 回答