Question

我的部分按钮未显示正确的代码。例如;当我点击iPhone时，iPhone 5S的专有名称显示为1，例如：“AT＆amp; T1”，最后但是当我点击iPhone 5时，它仍显示名称，其中1与1结尾而不是2例如：AT＆amp; T2，。它也可以与该行中的其他按钮一起使用。当我想在同一个或不同的按钮上添加另一组按钮时，有人可以向我解释一下我的javascript代码吗？

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

Answer 1

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

Samne level1item2,level1item3,level1item4,level1item5,level1item6 ....

Answer 2

您的HTML全部搞砸了：

您不应该使用表格，而是使用UL（列表）
表必须有行，跳过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＆lt; = 1; i ++）

Fix a little Here但是我看到你剪切并粘贴到很多代码，重复相同的ID，你的subSubMenus都在HTML中配置错误，每个项目应该有一个正确的指向子ID（所有指向ID 1）< / p>

如何向多个DIV按钮添加更多Javascript按钮

2 个答案: