Как скрыть отображение div на usercontrol с помощью javascript

Question

Мне нужно разработать функциональность для que и rply для этого я создал пользовательский contol в соответствии с моим требованием как fallow, и у меня есть div с текстовым полем для rely и отправьте кнопку на пользовательский элемент управления и сохраните стиль div disply none, и я вызываю ссылку javascript on reply, которая показывает этот div.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SuppReview.ascx.cs" Inherits="LaaFoodWebApp.SuppReview" %> 

<div> 
    <table style="width:100%;"> 
     <tr> 
      <td rowspan="2" style="width: 15%; vertical-align: top;"> 
       <asp:Label ID="lblMsgType" runat="server"></asp:Label> 
       <br /> 
       <asp:Label ID="lblMsgId" runat="server"></asp:Label> 
      </td> 
      <td style="width: 70%; vertical-align: top;"> 
       <asp:Label ID="lblMsgtBody" runat="server"></asp:Label> 
      </td> 
      <td style="width: 15%"> 
       <asp:Label ID="lblVDate" runat="server"></asp:Label> 
       <br /> 
       By 
       <asp:Label ID="lblname" runat="server"></asp:Label> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <a id="toggleReply" style="color: #15ADFF" href="#">Reply</a> 
      </td> 
      <td> 
       <asp:Label ID="lblEmail" runat="server"></asp:Label> 
       <br /> 
       <asp:Label ID="lblPhone" runat="server"></asp:Label> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       &nbsp;</td> 
      <td> 
      <panel id="pnlreply" > 
       <div id="DivReply" style="display:none"> 
       <table style="width:100%;"> 
        <tr> 
         <td style="width: 15%"> 
          Replys</td> 
         <td> 
          <asp:TextBox ID="TextBox1" runat="server" Height="50px" TextMode="MultiLine" 
           Width="100%"></asp:TextBox> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          &nbsp;</td> 
         <td style="text-align: right"> 
          <asp:Button ID="btnSubmit" runat="server" Text="Submit" 
           onclick="btnSubmit_Click" /> 
         </td> 
        </tr> 
        </table></div></panel> 
      </td> 
      <td> 
       &nbsp;</td> 
     </tr> 
    </table> 
</div> 

Но когда я добавляю эти пользовательские элементы управления несколько раз в соответствии с количеством ответов.

for (int i = 0; i< dt.Rows.Count; i++) 
{ 
    SuppReview SR = (SuppReview)Page.LoadControl("SuppReview.ascx"); 
    SR.settxt(dt.Rows[i]); 
    reviews.Controls.Add(SR); 
} 

на странице

<%@ Page Title="" Language="C#" MasterPageFile="~/SupplierMasterNew.Master" AutoEventWireup="true" CodeBehind="Supp_Views.aspx.cs" Inherits="LaaFoodWebApp.Supp_Views" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 
<script type="text/javascript"> 
    $(function() { 
     $('#toggleReply').click(function() { 
      $('#DivReply').toggle('slow'); 
      return false; 
     }); 
    }); 
     </script>  
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="CPHcontent" runat="server"> 
    <div style="width: 100%; height: 24px; background-color: #D2EEF2; padding-top: 10px; 
       font-size: large; color: #000000; text-align: left;"> 
     &nbsp;&nbsp;&nbsp; View</div> 

    <asp:Panel ID="reviews" runat="server"> 

    </asp:Panel> 
</asp:Content> 

При нажатии на ссылку Ответить ИНТ скрыть показать DIV (Содержит текстовое поле для полагаться и кнопка отправки) несколько раз, и он не работает для другого входа

Answer 1

У вас есть несколько повторяющихся идентификаторов на вашей странице, если вы добавляете этот элемент управления несколько раз!

Рассмотрите возможность изменения идентификаторов на классы.

также дать вашему внешнему div в вашем управлении класс! например <div class="wrapper">

Объявить функцию:

function toggleReply(sender) { 
    $(sender).parent('.wrapper').children('.DivReply').toggle('slow'); 
} 

ваша ссылка:

<a class="toggleReply" style="color: #15ADFF" href="javascript:void(0);" onclick="toggleReply(this);">Reply</a>