Tengo algunos problemas para que un div se muestre y se oculte configurando su visualización en JQuery.

Tengo este div. (Tenga en cuenta que todo este div también está dentro de un control Repeater. Tengo repetidores anidados.

<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>

Al hacer clic en el botón btnComment, necesito mostrar el siguiente div:

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

He probado varias soluciones y la última versión de JQuery es la siguiente:

$(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);
        });
});

Por alguna razón, el estilo no se aplica al div. ¡Incluso probé attr("style", "color: red;"); sin éxito! ¿Alguien puede señalarme en la dirección correcta?

0
Joachim Prinsloo 22 feb. 2018 a las 08:26

2 respuestas

La mejor respuesta

Según la otra respuesta y comentario, su div objetivo debe ser un hijo de element y necesita el período para apuntar a una clase.

Entonces, podría configurar su elemento en 2 niveles más y agregar el período de selección de clase como se muestra a continuación:

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

var commentdiv = element.find(".commentsDiv"); 
1
DaveStSomeWhere 22 feb. 2018 a las 05:50

Su código no encuentra el commentsDiv porque no es el hijo del element. Probablemente debería usar más cercano. Prueba esto:

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

Y probablemente te pierdas un . antes del commentsDiv. (Como señaló Shree Khanal en los comentarios)

2
ltamajs 22 feb. 2018 a las 06:15