0

私は Javascrip を使用しており、すべての div を非表示にする次のような関数があります。しかし、このコードが機能しない理由がわかりません。誰かがこれを手伝ってくれますか？

Javaスクリプト

 function showDiv(divTag,id)
    {
     var i;
      for(i=1;i<7;i++)
     {
       document.getElementById(divTag+i).style.display = 'none';
     }
      document.getElementById(divTag+id).style.display = 'block';
    }

また

function showDiv(divTag,id)
{
  var i;
  for(i=1;i<5;i++)
 {
   var tempDiv = divTag + i;
   document.getElementById(tempDiv).style.display = 'none';
 }
document.getElementById(divTag+id).style.display = 'block';
}

そしてHTML

 <a href="#" onClick="showDiv(\"hide_\",1)">Show Only Div1</a>
    <div id="hide_1">
    Abc
    </div>
     <a href="#" onClick="showDiv(\"hide_\",2)">Show Only Div2</a>

    <div id="hide_2">
    BCD
    </div>
<a href="#" onClick="showDiv(\"hide_\",3)">Show Only Div2</a>

    <div id="hide_3">
    EDF
    </div>
<a href="#" onClick="showDiv(\"hide_\",4)">Show Only Div2</a>

    <div id="hide_4">
    FGE
    </div>

上記の両方のプロセスを試しましたが、失敗しました

4

2 に答える 2

1

いくつかのこと：

  1. （"onclick"not "onClick"）は、htmlとJavaScriptの両方でクリックイベントハンドラーを割り当てる正しい方法です。
  2. 最初の関数の行で1から6にループしてfor(i=1;i<7;i++)いますが、htmlには4つの要素しかありません。存在しない5番目に到達すると、コードはエラーをスローします。「TypeError：nullのプロパティ'style'を読み取れません」の行に沿った何か。
  3. @verisimilitudeが述べたように、同じ方法で引用された別のテキスト内に引用されたテキストを配置すると、HTMLに構文エラーが発生します。する必要がありますonclick="showDiv('hide_',1)"。'hide_'を囲む一重引用符に注意してください。

動作するコードは次のとおりです。ここをクリックして、実際の動作を確認してください。

JavaScript関数は次のとおりです。

// Please note that it must be in the global scope
// otherwise you won't be able to call it from your html.

function showDiv(divTag, id) {
  var i;
  for (i = 1; i < 5; i++) {
    var tempDiv = divTag + i;
    document.getElementById(tempDiv).style.display = 'none';
  }
  document.getElementById(divTag+id).style.display = 'block';
}

また、要素を非表示/表示する前に、要素の存在を事前に検証するコードの別の動作バージョンを確認してください。forしたがって、削除された要素に対してループが繰り返されることを心配する必要はありません。

そしてここにあなたのhtmlがあります：

<a href="#" onclick="showDiv('hide_', 1);">Show Only Div1</a>
<div id="hide_1">Div1</div>

<a href="#" onclick="showDiv('hide_', 2);">Show Only Div2</a>
<div id="hide_2">Div2</div>

<a href="#" onclick="showDiv('hide_', 3);">Show Only Div3</a>
<div id="hide_3">Div3</div>

<a href="#" onclick="showDiv('hide_', 4);">Show Only Div4</a>
<div id="hide_4">Div4</div>​
于 2012-05-22T05:23:09.850 に答える
0 
<a href="#" onClick="showDiv("hide_",1)">Show Only Div1</a>

javascript構文エラーが発生します。これは

<a href="#" onClick="showDiv('hide_',1)">Show Only Div1</a>

「hide_」の前後の一重引用符を確認してください

于 2012-05-22T05:13:01.483 に答える