Question

我有这个网站，我从W3School复制了一些Jquery来切换按钮隐藏开/关。但是如果我将这个<div>和<p>标记放在div中，我就像一个窗口一样运行。它只是不起作用。在整个页面中它的工作除外<div id="BoxWithPhotoAndBtn">这怎么可能？我在引导程序和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">&times;</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>

Answer 1

当您使用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();

Answer 2

HTML中有多个按钮和多个 P标记，在这种情况下，您需要隐藏特定的 P标记单击按钮时，请使用特定控件ID或类选择器。

按以下更新按钮

 <button type="button" id="btnClose" class="btn btn-default" data-dismiss="modal">Close</button>

将您的JS更改为

$(document).ready(function(){
    $("#btnClose").click(function(){
        $("#phide").toggle();
    });
});

JSFiddle示例

jquery无法在ID为

2 个答案: