Question

我在通过在JQuery中设置显示来显示和隐藏div时遇到了一些麻烦。

我有这个div。（请注意，整个div也在Repeater控件内。我有嵌套的中继器。

<div id="cardfooter" class="cardfooter">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Repeater ID="rptSocialData" runat="server">
                <HeaderTemplate></HeaderTemplate>
                <ItemTemplate>
                    <button id="btnLike" type="button" class="btn btn-default btn-sm"><input id="hdnASID" type="hidden" runat="server" value='<%#Eval("ActivityStreamID") %>'/><span class="glyphicon glyphicon-thumbs-up"></span> Like</button>
                    <button id="btnComment" type="button" class="btn btn-default btn-sm"><input id="hdnASID2" type="hidden" runat="server" value='<%#Eval("ActivityStreamID") %>'/><span class="glyphicon glyphicon-comment"></span> Comment</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <%#Eval("LikeCount") %>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <%#Eval("CommentCount") %>
                </ItemTemplate>
                <FooterTemplate></FooterTemplate>

            </asp:Repeater>
            <div class="commentsDiv">
                this is the div
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

点击btnComment按钮，我需要显示以下div：

<div class="commentsDiv">
    this is the div
</div>

我尝试了多种解决方案，最新的JQuery迭代如下：

$(document).ready(
    function ()
    {
        $('[id*=btnComment]').click(function (event) {
            debugger;
            event.preventDefault(); //preventing button's default behavior
            var ASID2 = $(this).find("input[type=hidden]").val();

            var element = $(this).parent();                 //get the update panel - Works! finding element
            var commentdiv = element.find("commentsDiv");   // find commentsDiv in the update panel - Works! finding element
            commentdiv.css("color", "red");                 // set the text to red as a test. NOT WORKING


            //alert(ASID2);
        });
});

由于某种原因，样式不适用于div。我甚至试过attr("style", "color: red;");没有成功！任何人都可以指出我正确的方向吗？

Answer 1

您的代码找不到commentsDiv，因为它不是element的子代。可能你应该使用closest。试试这个：

var element = $(this).closest('#cardfooter');
var commentdiv = element.find(".commentsDiv");

你可能会在.之前错过commentsDiv。（正如Shree Khanal在评论中指出的那样）

Answer 2

根据其他答案和评论，您的目标div必须是element的孩子，并且您需要一段时间来定位一个班级。

因此，您可以将元素设置为更多级别，并添加类选择器周期，如下所示：

$(this).parent().parent().parent();            

var commentdiv = element.find(".commentsDiv");

Div风格不会改变使用Jquery

2 个答案: