0

これらのjQueryコマンドをhtmlのリンクを介して後で実行しようとしています:

                $(document).ready(function(){
                    $('#2wa').click(function() {
                           $('#ownstream').hide();
                           $('#movstream').hide();                               
                           $('#2wastream').fadeIn();                               
                    });
                $(document).ready(function(){                      
                    $('#own').click(function() {
                            $('#2wastream').hide();
                            $('#movstream').hide();
                            $('#ownstream').fadeIn();
                            return false;
                    });
                $(document).ready(function(){
                    $('#mov').click(function() {
                            $('#2wastream').hide();
                            $('#ownstream').hide();                                     
                            $('#movstream').fadeIn();
                            return false;
                    });

これらの 3 つのセレクター コマンドは、2 行目の ID が表示されたときに 2 つのアイテムを非表示にし、1 つを表示するはずですが、クリックしても何も起こりません。リンクは次のようにフォーマットされています。

                        <a href="test/#" id="own">

およびそのように表示/非表示される要素:

                        <div id="ownstream"></div>

これらについては、2 つの問題があります。リンク自体が変更を行わないことと、ページの読み込み時に変更が行われないため、3 つの要素がすべて表示されることです。これを解決するにはどうすればよいですか？また、jquery スクリプトを head または body の下に配置する必要がありますか?

4

3 に答える 3

0

これを機能させるために試すことができることがいくつかあります。

スクリプトがページに取り込まれていることを確認してください。確認する方法の 1 つは、Chrome デバッガーの [ソース] タブを使用し、html ヘッド セクションで他のファイルを検索することです。

jQuery をインクルードした後に datatale スクリプトをインクルードしたことを確認してください。

jQuery が正しく含まれているかどうかを確認し、1 回だけ実行します。

jQuery の競合に注意してください。$ をオーバーライドしている他のライブラリがあるため、$ は jQuery のエイリアスではないため、コードが機能しません。jQuery.noConflict() を使用して、同じ変数 $ を使用するページ上の他のライブラリとの競合を回避できます。

あなたのコードによれば、すべてのコードを 1 つの document.ready にプルして、以下のように正しく閉じないでください。

 $(document).ready(function(){

                    $('#2wa').click(function() {
                           $('#ownstream').hide();
                           $('#movstream').hide();                               
                           $('#2wastream').fadeIn();                               
                    });


                    $('#own').click(function() {
                            $('#2wastream').hide();
                            $('#movstream').hide();
                            $('#ownstream').fadeIn();
                            return false;
                    });


                    $('#mov').click(function() {
                            $('#2wastream').hide();
                            $('#ownstream').hide();                                     
                            $('#movstream').fadeIn();
                            return false;
                    });
});

最後に、参照する要素 (2wastream、ownstream、movstream) が実際に ID とともに存在することを確認します。

于 2012-12-22T16:30:00.277 に答える
0

jquery スクリプトを head タグに配置する必要があります。次に、このコードをその下のどこでも使用できます。

次のように、アンカー タグの ID 名が一致していることを確認します。

<a href="" id="2wa">

そしてそうではありません：

<a href="" class="2wa">

リンクがロード時に非表示になるようにするには、次のようにします。

$(document).ready(function(){
    $('#2wastream').hide();
    $('#ownstream').hide();                                     
});

または、次のように css スタイル属性を追加します。

    <a href="" id="2wastream" style="display:none;">
于 2012-12-22T16:19:09.033 に答える