asp.netデータリストのコメントとクリック可能なリンクを表示するjquery

Question

私は初めてjqueryを実験しようとする新しいコーダーです。私は項目のコメントを表示するために使用されるかもしれない簡単なデータリストをセットアップしようとしています。私は、クリック可能なリンク（データリストの行ごと）が、コメントテキストを持つパネル（データリストの行ごと）をドロップするようにします。ユーザーは行1を見てリンクをクリックしてコメントを読んでコメントパネルをドロップします。彼らは下にスクロールし、次の項目について同じことをします。

これまでのところ、小さなテストページとして以下のコードがありますが、機能しません。基本的に何も起こりません。誰かが私を助けてくれることを願っています。私はとても新しいので、チュートリアルのビデオなどで見ていることからこのことを自分自身で教えるだけです。私はclientIDのことを試しました。なぜなら、自動生成されたIDの.NETを処理する必要があるからです.Netは、レンダリングされたパネルを割り当てますが、正しく行っているかどうかはわかりません。

あなたの時間と労力を大いにありがとうございます。

ヘッド部分

<script src="jquery-1.4.4.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('Panel1text').hide(); 
    }); 

    $("#<%=HyperLink1.ClientID%>").click(function() { 
     $("<%=Panel1text.ClientID%>").show(); 
    }); 
</script> 

本体部

<asp:DataList ID="DataList1" runat="server" DataKeyField="cid" 
     DataSourceID="SqlDataSource1" Width="645px"> 
     <ItemTemplate> 
      cid: 
      <asp:Label ID="cidLabel" runat="server" Text='<%# Eval("cid") %>' /> 
      <br /> 
      cuser: 
      <asp:Label ID="cuserLabel" runat="server" Text='<%# Eval("cuser") %>' /> 
      <br /> 
      blogid: 
      <asp:Label ID="blogidLabel" runat="server" Text='<%# Eval("blogid") %>' /> 
      <br /> 
      <br /> 
      <asp:HyperLink ID="HyperLink1" runat="server">show text</asp:HyperLink> 
      <br /> 
      <asp:Panel ID="Panel1text" runat="server"> 
       <asp:Label ID="textLabel" runat="server" Text='<%# Eval("text") %>' /> 
      </asp:Panel> 
      <br /> 
     </ItemTemplate> 
    </asp:DataList> 
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
     ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
     SelectCommand="SELECT * FROM [ocomments]"></asp:SqlDataSource> 

Answer 1

あなたが 'HyperLink1' と 'Panel1text' のidを持つ複数の要素を持ってしようとしているように私には見えます。代わりにクラスを使うことをお勧めします。リンク要素に「class = 'link'」を追加し、パネル要素に「class = 'panel'」を追加します。

.panel { display: none; } 

その後要素を表示するには、次のjQueryを使用します：最初にパネルを非表示にするには、以下のCSSを使用します。

$(document).ready(function(){ 

    $(".link").click(function(evt){ 
     evt.preventDefault(); // prevents the click from leaving the page 

     $(this).next().show(); // show the panel 

    }); 

}); 

あなたは「.next（）をいじる必要があるかもしれませんショー（）セレクタを少し押します。 ASP.NETがどのように要素をレンダリングするかは不明です。

ボブ