0

一部のボタンで適切なコードが表示されません。例えば; iPhone、iPhone 5S をクリックすると、適切な名前が 1 で表示されます。たとえば、「AT&T1」が最後に表示されますが、iPhone 5 をクリックすると、最後に 2 ではなく 1 が付いた名前が表示されます。例: AT&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

4

2 に答える 2

1

あなたの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 は最初の ID でのみループしていました (i=1;i<=1;i++)

ここで少し修正しますが、多くのコードをカット アンド ペーストし、同じ ID を繰り返し、HTML で subSubMenus がすべて正しく構成されていないことがわかります。各項目は正しいサブ ID を指している必要があります (すべて ID 1 を指しています)。

于 2013-08-24T20:57:24.517 に答える
1

html 要素の ID 属性は一意であると想定されているため、同じ ID を持つ複数の div があるlevel1item1ため、id を持つ div を選択するJSかjquery、id を持つ最初の div が選択されると、この動作が見られるため、class 属性を使用して複数の div を割り当ててみてください

サムネlevel1item2,level1item3,level1item4,level1item5,level1item6 ....

于 2013-08-24T20:40:24.737 に答える