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 闭包库团队所倡导的。您还会看到人们ready为此使用 jQuery 的事件并将脚本放入，这确实有效，但如果您控制标签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 回答