Question

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

当我将此代码放在html的头部时 - 它不起作用。
在身体 - 它的作用。
在一个单独的文件中 - 它不起作用。
秘密在哪里？

Answer 1

要让它在头部工作，请执行以下操作：

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

问题是您在准备好之前正在寻找标识为btnCon的元素。通常的解决方案是将代码嵌入到jQuery在DOM准备就绪时调用的回调中。

但请注意，即使始终建议使用$(function(){ ... });，最佳做法通常是将代码放入

在单独的javascript文件中
在正文末尾的脚本元素中

Answer 2

当我将此代码放在html的头部时 - 它不起作用。在身体 - 它的作用。在一个单独的文件中 - 它不起作用。

如果您将script标记包含文件放在正文末尾，就在结束</body>标记之前，它将在单独的文件中工作。

它不起作用的原因是，当它在head中时，代码立即运行，并且元素尚不存在，因此处理程序不会被连接起来。

这里正确的答案是将代码的script标记放在最后。这就是YUI team和Google closure library team所倡导的内容。您还会看到人们使用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>

Answer 3

在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(); 
    }); 

});

JS代码只有放在正文中才有效

3 个答案: