1

誰かが私のコードのどこが間違っているかを説明してくれることを願っています...だから私はこの機能を持っています:

function divdisplay(element){
  if(document.getElementById(element).style.display == 'none'){
     document.getElementById(element).style.display = 'block';
     for (var i=0; i<NUMBER_OF_DIVS; i++)
       document.getElementById(i).style.display = 'none';
  } else
     document.getElementById(element).style.display = 'none';

関数は div を問題なく表示しますが、非表示部分が問題です。他にもいくつか隠したい<divs>。これらidsの他の<divs>要素は単純な数字です。そのため、これらの要素を変数で指定しようとしていますi。しかし、#2 が既に表示されているときに<div>#1をクリックすると、#1 だけが表示され、#2 は消えません。このような外観：<div><div><div><divs>

    <div id="1" style="display:none;">
      <a href="javascript:divdisplay(1);">
        <img src="..."/>
      </a>
    </div>

    <div id="2" style="display:none;">
      <a href="javascript:divdisplay(2);">
        <img src="..." />
      </a>
    </div>

    <div id="3" style="display:none;">
      ...

そして、対応するリンクが表示されたときに最初に表示されます

    <a href="javascript:divdisplay(1);">
    <a href="javascript:divdisplay(2);">
    <a href=...

クリックされます。

それぞれの画像<div>は関数に再びリンクされているため、 内の画像をクリックすると再び非表示になりますが、別のリンクをクリックしても表示が再び消える<div>ことはありません。<div>どこで私は間違えましたか？

とにかく事前に感謝します。

4

2 に答える 2

1

なぜJqueryを使わないのですか？非表示/表示する各divにクラスを追加するだけです

<div class="test">content here</div>

jquery からshow()andを使用できるようになりました。hide()

$(".test").show();classで$(".test").hide();すべての div を表示/非表示にしtestます。

show()とhide()もチェックアウトします。

さらに、機能に効果を追加するチャンスがshow()ありhide()ます。

于 2012-11-21T10:37:32.447 に答える
0

この関数はすべての div をループし、指定したものだけを表示しますelement

function divdisplay(element){
    for (var i=0; i<NUMBER_OF_DIVS; i++){
        var div = document.getElementById('div'+i);
        if(i == element){
            div.style.display = 'block';
        }else{
            div.style.display = 'none';
        }
    }
}
// As Alnitak suggested, this can be condensed into:
function divdisplay(element){
    for (var i=0; i<NUMBER_OF_DIVS; i++){
        document.getElementById('div'+i).style.display = (i == element)? 'block' : 'none';
    }
}

このような小さな関数では jQuery を使用しないほうがよいと思います。ライブラリをロードする手間が省け (-1 HTTP 要求)、ネイティブ機能の方が単純に高速だからです。(この量のコードでは重要ではありませんが、それでも)
jQuery をまだ使用していないと仮定します。もしそうなら、これはうまくいきます：

次のようにすべての要素にクラスを追加するとします。

<div class="hideMe" id="1" style="display:none;">
  <a href="javascript:divdisplay(2);">
    <img src="..." />
  </a>
</div>

jquery:

function divdisplay(element){
     $(".hideMe").hide();
     $("#"+element).show();
}
于 2012-11-21T10:38:18.413 に答える