0 
$("#btnCon").click(function() {
    $('#con').slideToggle('slow');
    $('.tgg:not(#con)').hide(); 
});

このコードをhtmlの先頭に配置すると、機能しません。
体内で-それは機能します。
別のファイルで-それは機能しません。
秘密はどこにありますか？

4

3 に答える 3

4

それを頭の中で機能させるには、これを行います：

$(function(){
  $("#btnCon").click(function() {
    $('#con').slideToggle('slow');
    $('.tgg:not(#con)').hide(); 
  });
});

btnCon問題は、準備が整う前にidを持つ要素を探していたことです。通常の解決策は、DOMの準備ができたときにjQueryが呼び出すこのコールバックにコードを埋め込むことです。

ただし、$(function(){ ... });常に使用することをお勧めしますが、ベストプラクティスは、通常、コードを次のいずれかに配置することです。

  • 別のjavascriptファイルで
  • 本文の最後にあるスクリプト要素内
于 2012-12-12T15:11:51.023 に答える
4

このコードをhtmlの先頭に配置すると、機能しません。体内で-それは機能します。別のファイルで-それは機能しません。

scriptファイルを含むタグを本文の最後、終了タグの直前に配置すると、別のファイルで機能します</body>。

それが機能しない理由は、それがにあるときhead、コードはすぐに実行され、要素はまだ存在しないため、ハンドラーが接続されないためです。

ここでの正しい答えはscript、コードのタグを最後に配置することです。これは、YUIチームとGoogleクロージャライブラリチームによって提唱されているものです。また、これにjQueryのreadyイベントを使用し、スクリプトを挿入している人もいます。これは機能しますが、タグの移動先headを制御する場合は、これを行う必要はありません。script

つまり、要するに：

これは機能します：

<body>
...content...
<script>
/* ...code... */
</script>
</body>

そしてこれは機能します：

<body>
...content...
<script src="/the/script/file.js"></script>
</body>

そしてこれは機能します：

<head>
...
<script>
jQuery(function($) { // <== This is a shortcut for `ready`
    /* ...code...*/
});
</script>
</head>
<body>
...content...
</body>

これは、スクリプトファイルのコードがハンドラー内にある場合に機能します。ready

<head>
...
<script src="/the/script/file.js"></script>
</head>
<body>
...content...
</body>
于 2012-12-12T15:13:10.210 に答える
2

document.readyでお試しください

$(document).ready(function () {

    $("#btnCon").click(function() {
        $('#con').slideToggle('slow');
        $('.tgg:not(#con)').hide(); 
    });

});

速記-

$(function () {

    $("#btnCon").click(function() {
        $('#con').slideToggle('slow');
        $('.tgg:not(#con)').hide(); 
    }); 

});
于 2012-12-12T15:12:30.913 に答える