0

私はこのコードで遊んでいました: http://jsfiddle.net/VmVAq/

ご覧のとおり、ページの読み込み時に DIV 1 のみが表示されます。お気づきのとおり、スタイリングはインラインなので、ヘッダーに追加することにしました: http://jsfiddle.net/Ym96t/2/

ここが問題です。ページの読み込み時に、すべての DIV が表示されるのはなぜですか? どうやってコードを壊したのですか?

ここでコードを確認したい場合：

オリジナル：

<html>
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
}
</script>

</head>

<body>

             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>


             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>

             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>

</body>
</html>

スタイル:

<html>
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
}
</script>

<style>
    #scoopout {
        border: 1px solid blue;
    background-color: #99CCFF;
    padding: 5px;
    width: 150px;
    }
</style>

</head>

<body>

             <div id="scoopout">
                <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes1">Div #1</div>


             <div id="scoopout">
                <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes2">Div #2</div>

             <div id="scoopout">
                <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes3">Div #3</div>

</body>
</html>
4

2 に答える 2

5

最初のフィドルでは、いくつかの要素を指定しますdisplay: none。2番目の例ではそれを行いません。

つまり、スタイルルールを要素に移動するだけでなく<style>、CSSの一部も削除しました。

1つだけを表示する「準備完了」ハンドラーを追加できます。

$(function() { showonlyone('newboxes1'); });
于 2012-08-08T14:20:37.163 に答える
1

OK、私はあなたのフィドルを書き直しました。あなたが答えを受け入れたとしても、将来的に役立つかもしれません.

最初に知っておく必要があるのは、JS の関数はオブジェクトであるため、プロパティを設定できるということです。これを行うと、悪意のあるグローバルを使用したり、イベントのバインドを解除して再バインドしたり、クロージャーを使用したりすることなく、いつでもどの要素が表示されているかを追跡できます。聞いたことがあると思いますが、コードから判断すると、ややなじみのない領域があります。

次に行ったのは、クリック可能なすべての要素を特定し、「秘密の」reveal div を非表示にして、(クラスを使用して) リンクにクリック イベントを添付することでした。次に、表示された要素への参照を割り当てて、次のクリック イベントで再び非表示にできるようにします。

あなたはjquery 1.4.4を使用しているので（アップグレードの時期だと思います）、私はそれを非常に単純に保ちました：

働くフィドル

コメント/質問用のコードはこちら: コメントは大歓迎です

$(document).ready(function()
{//All this code will be executed when the page has loaded
    $('.newboxes').each(function()
    {
       $(this).hide(); 
    });
    $('.reveal').click(function showOne()
    {
       if (showOne.visible && showOne.visible.hide)
       {
           showOne.visible.hide(600);
       }
       if (showOne.visible && showOne.visible.attr('id').replace('newboxes','myHeader') === $(tihs).attr('id'))
       {
           showOne.visible = undefined;//set to undefined, otherwise the next click will try to hide the hidden div
           return;//stop here, don't invoke show method
       }
       showOne.visible = $('#'+$(this).attr('id').replace('myHeader','newboxes'));
       showOne.visible.show(200);
    });
    $('#myHeader1').click();//show the first div on page load
});//anything after this will be run as soon as possible, likely before the page loads
于 2012-08-08T14:42:27.067 に答える