我有Index.asp
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--#include file="blocks/header.asp"-->
<!--#include file="blocks/bottom.asp"-->
<!--#include file="blocks/footer.asp"-->
</body>
</html>
block /header.asp
<div class="hideMeIamHeader"></div>
block /bottom.asp
<div class="hideMeIambottom"></div>
block /页脚.asp
<div class="hideMeIamfooter"></div>
<button id="Hideheader">Hide Header</button>
<button id="Hidebottom">Hide bottom</button>
<button id="Hidefooter">Hide footer</button>
<script>
$(function() {
$('#Hideheader').on('click',function(){$('.hideMeIamHeader').hide();});
$('#Hidebottom').on('click',function(){$('.hideMeIambottom').hide();});
$('#Hidefooter').on('click',function(){$('.hideMeIamfooter').hide();});
});
</script>
如何让这个例子工作？我无法从 footer.asp
.hideMeIamHeader 和 .hideMeIambottom
更新(已解决)
所以index.asp一定是这样的
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--#include file="blocks/header.asp"-->
<!--#include file="blocks/bottom.asp"-->
<!--#include file="blocks/footer.asp"-->
<script>
$(function() {
$('#Hideheader').on('click',function(){$('.hideMeIamHeader').hide();});
$('#Hidebottom').on('click',function(){$('.hideMeIambottom').hide();});
$('#Hidefooter').on('click',function(){$('.hideMeIamfooter').hide();});
});
</script>
</body>
</html>
最佳答案
最有可能的情况是，在设置点击处理程序时，DOM 中尚不存在这些项目。您可以使用 jQuery 的 ready() 函数纠正此问题:
$(document).ready(function() {
$('#Hideheader').on('click',function(){$('.hideMeIamHeader').hide();});
$('#Hidebottom').on('click',function(){$('.hideMeIambottom').hide();});
$('#Hidefooter').on('click',function(){$('.hideMeIamfooter').hide();});
});
jQuery 文档:https://api.jquery.com/ready/
关于包含文件之间的 Javascript 事件委托(delegate)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31423709/