我有这个网站，我从 W3School 复制了一些 Jquery 来打开/关闭按钮隐藏。但是如果我把这个<div>和 <p>在我制作的 div 中标记以像窗口一样运行。它只是行不通。在整个页面中它都有效，除了<div id="BoxWithPhotoAndBtn">这怎么可能？我在 bootstrap 和 ASP.net 中工作。
<script>
$(document).ready(function () {
var phide = 'phide';
$("#bHide").click(function () {
$("#phide").toggle();
});
});
</script>
<div class="container">
<!-- Modal messageModel -->
<div class="modal fade" id="messageModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">
<asp:Label ID="lblMessageTitle" CssClass="black" runat="server"></asp:Label></h4>
</div>
<div class="modal-body">
<p id="lblModelMessage" class="black" runat="server"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- this works just fine
<p id="phide">This is a paragraph.</p>
<div id="bHide">Toggle between hide() and show()</div> -->
<img runat="server" src="#" class="imgAvatarSmallPE" id="imgAvatarSmall" />
<div id="BoxWithPhotoAndBtn">
<!-- this doesn't work -->
<p id="phide">This is a paragraph.</p>
<div id="bHide">Toggle between hide() and show()</div>
<!-- create account fot this person -->
<div id="membershipBoxPE">Membership Card</div>
<div id="membershipCardPE">
</div>
<h2 runat="server" id="fullName" class="fullNamePE"></h2>
<div id="buttonInBox">
<span id="glypiconUserColor" class="glyphicon glyphicon-user fontSizeGlyphiconPE"></span> <p class="pinBoxPE"> Create account for this person</p>
<hr class="lineInBoxPE"/>
<span id="glypiconClockColor" class="glyphicon glyphicon-time fontSizeGlyphiconPE"></span> <p class="pinBoxPE"> Trained 31 times this Month</p>
<hr class="lineInBoxPE" />
</div>
<asp:Image runat="server" CssClass="imgLevelPatchPE" ID="imgLevelPatch" />
<p class="logedInPPE">This Person has logged in 1 time</p>
</div>
这是我从中获取的副本
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle between hide() and show()</button>
</body>
</html>
最佳答案
当您使用asp.net 控件时，ID 是通过asp.net 引擎动态生成的(除非您使用staticID 模式)。因此它们不会完全按照您声明它们的方式出现在呈现的 DOM 中。为了在 asp.net 元素上应用正确的选择器，您需要通过 ClientID 属性使用服务器端表达式。
例如:
<img runat="server" src="#" class="imgAvatarSmallPE" id="imgAvatarSmall" />
可以通过 jquery 访问:
var id = '#<%=imgAvatarSmall.ClientID%>';
$(id).hide();
关于jquery 不能在具有 id 的 div 中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33766435/