0

私はjQueryを初めて使用するので、直面している問題はかなり簡単です。基本的に私が達成しようとしているのは、サイトの DIV 要素内にさまざまな単純なテキストのみのページをロードし、ナビゲーション バーを使用してこれらの個々の DIV を非表示/非表示にすることです。

DIV は、スクリプト ブロックを使用して、要求されたページに正しく読み込まれます。ただし、正しく機能していないのは、これらの DIV ブロックの可視性を切り替えることです。DIV ブロックのいずれかを参照するたびにスクリプト呼び出し全体をブロックする、作成した jQuery 関数に絞り込みました。コード スニペットを使用して説明します。

これは非常に単純なコードで、メニュー リンクをクリックすると非表示機能が実行され、対応する DIV 要素が表示されます。

    $( document ).ready(function() 
    {           
        console.log("document ready."); <-- does NOT get called with hideDivs()

        $('#button1').click(function(){
            hideDivs();
            $("#page1").show();
        }); 

        $('#button2').click(function(){
            hideDivs();
            $("#page2").show();
        });
    });

これは、ready 関数のすぐ上にある hideDivs() 関数です。

    function hideDivs() 
    {
        $("#page1").hide(); <-- These lines cause the entire
        $("#page2").hide(); <-- <script> block to note get called.
    }

最後に、page1とpage2が作成され、ページの途中にスクリプト ブロックが挿入されます。

<div id="page1"></div>
<div id="page2"></div>

<script>
    $("#page1").html('<object style="overflow:hidden; width: 100%; height: 500px;" data="page1.php">').show();
    $("#page2").html('<object style="overflow:hidden; width: 100%; height: 500px;" data="page2.php">').hide();
</script>

では、一番上の SCRIPT ブロックが hideDivs() 関数で失敗するのはなぜでしょうか? $( document ).ready 関数内に変更なしで配置しようとしました。繰り返しますが、関数が空白の場合、または「console.log」のような単純なものが含まれている場合は機能しますが、DIV タグを参照すると機能しなくなります。

さらに奇妙なことに、関数を FAIL にするコードは、単純にコードを次のように書き直せば動作します。

        $('#button1').click(function(){
            $("#page1").hide(); <-- This works fine
            $("#page2").hide(); <-- (page1 repeated to match function code)
            $("#page1").show();
        });

私はかなりの数のページを持っているので、多くの繰り返しコードを持たないように関数を使用できるようにしたいと考えています.

JavaScript コンソールにエラーは表示されません。StackOverflow と Google 検索で関数呼び出しを詳しく調べましたが、解決策を見つけることができませんでした。私は見落としている本当にばかげた間違いを犯したと確信しているので、どんな助けも大歓迎です。

4

1 に答える 1

0

したがって、関数全体で div を非表示にする代わりに、それぞれにクラスを配置し、そのクラスを選択して非表示にすることができます。たとえば、各ページの Div に class="clickablePages" を指定してから、次のようにします。

$(".clickablePages").hide();

これにより、クラスを追加したすべての div が非表示になります。

ボタンごとにすべてのボタン クリックを繰り返す場合は、ボタンの ID に基づいて 1 つの関数で簡単に実行できます。すべてのボタンにクラスを配置し、クラスを選択して関数をトリガーし、その関数内で必要な ID を取得することもできます。このようなもの：

$('.buttonclick').click(function(){
        var pageID = $(this).attr('id');
        $("#page" + pageID).show();
    });

この場合、ボタンにページ番号と一致する '1' または '2' の ID があれば、そのページ番号の div のみが表示されます。それが理にかなっていることを願っています。

于 2013-11-05T11:27:29.177 に答える