ToggleClass未唤醒
我正在使用jQuery使一个div出现和消失。这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$('.button').on('click', function(){
$('.text').toggleClass('hidden');
});
</script>
</head>
<style>
.hidden{
display: none;
}
</style>
<body>
<div class="button">show/hide test</div>
<div class="text hidden">test</div>
</body>
</html>但是当我点击div“按钮”时，什么也没有发生，文本仍然隐藏着。
回答 2
Stack Overflow用户
发布于 2015-07-23 06:34:40
您需要将jquery包含在文档就绪检查中，如下所示
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
$('.button').on('click', function(){
$('.text').toggleClass('hidden');
});
});
</script>
</head>
<style>
.hidden{
display: none;
}
</style>
<body>
<div class="button">show/hide test</div>
<div class="text hidden">test</div>
</body>
</html>或者，您可以简单地将jquery代码移动到body标记的末尾，这样它引用的所有元素都将已经存在，以下是代码
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
</head>
<style>
.hidden{
display: none;
}
</style>
<body>
<div class="button">show/hide test</div>
<div class="text hidden">test</div>
<script type="text/javascript">
$('.button').on('click', function(){
$('.text').toggleClass('hidden');
});
</script>
</body>
</html>或者，您可以使用附加到始终存在的祖先元素(如body或document )的委托事件处理程序。重要注意事项：建议优先使用document而不是body，因为body在样式方面有一个错误，这意味着它可能无法接收鼠标事件。
<script type="text/javascript">
$(document).on('click', '.button', function(){
$('.text').toggleClass('hidden');
});
</script>这是通过侦听要冒泡到祖先元素(例如document)的事件，然后将jQuery选择器(即'.button')应用于冒泡链中的元素，然后将事件处理函数应用于导致事件的匹配元素来实现的。最终结果是选择器只需要在事件时间匹配，而不需要在事件注册时匹配。document总是存在的，因此是连接代码的好地方。
Stack Overflow用户
发布于 2015-07-23 06:32:27
简短版本
更改：
$('.button').on('click', function() {至：
$('body').on('click', '.button', function() {长版本
您没有正确使用on()事件处理程序。使用它的方式期望在代码运行时.button元素已经存在，但事实并非如此。
事件处理程序仅绑定到当前选定的元素；当您的代码调用.on()时，它们必须存在。要确保元素存在并且可以选择，请将脚本放在HTML标记中的元素之后，或者在文档就绪处理程序中执行事件绑定。或者，使用委托事件附加事件处理程序。
正确的语法类似于$('body').on('click', '.button', function() {。请在此处查看：
.hidden {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$('body').on('click', '.button', function() {
$('.text').toggleClass('hidden');
});
</script>
<div class="button">show/hide test</div>
<div class="text hidden">test</div>
https://stackoverflow.com/questions/31575165
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号