$("#btnCon").click(function() {
$('#con').slideToggle('slow');
$('.tgg:not(#con)').hide();
});
当我将此代码放在 html 的头部时 - 它不起作用。
在体内 - 它有效。
在一个单独的文件中 - 它不起作用。
秘密在哪里?
要使其在头脑中工作,请执行以下操作:
$(function(){
$("#btnCon").click(function() {
$('#con').slideToggle('slow');
$('.tgg:not(#con)').hide();
});
});
btnCon
问题是您在准备好之前就在寻找带有 id 的元素。通常的解决方案是在 DOM 准备好时 jQuery 调用的回调中嵌入代码。
但请注意,即使$(function(){ ... });
始终建议使用,最佳做法通常是将您的代码
当我将此代码放在 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>
在 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();
});
});