最初の要素のみをクリックするとdiv要素が表示される - c＃、javascript、jquery、asp.net

私はItemTemplateの中に自分のデータをリストしています.ItemTemplateの中には、次のような2つのdivタグがあります：

   <ItemTemplate>
<div id="contentdiv">
<h4 id="titleresult"><a href="#"  onclick="showResults(<%#Eval("UserID")%>);return false;" class="title"><%# Server.HtmlEncode(Eval("Name").ToString())%></a></h4>
</div>

<div id="showclick" class=hideAll>
<p class="brief"><%# Server.HtmlEncode(Eval("LegalName").ToString())%></p>
<p class="brief"><%# Server.HtmlEncode(Eval("FirstName").ToString())%></p>
<p><%# Server.HtmlEncode(Eval("LastName").ToString())%></p>
</div>
</ItemTemplate>

次に、CSSがhideAllクラスを定義して、ページが読み込まれたときに、このdivタグのデータがユーザーがcontentdivリンクをクリックするまで非表示にするようにします。

    .hideAll  { display:none }
.displayAll { display:block; top:0px}

その後、私はクリックイベントを発生させるjavascriptの部分を持っています。

  <script type="text/javascript">
function showResults(UserID) {
var contentdiv= document.getElementById("contentdiv");
var showclick = document.getElementById("showclick");

<%
long id =0;
DataAccess dataAccess = new DataAccess();
Data = dataAccess.GetCounterParty(id);

%>
var UserID = <%=dataAccess.GetCounterParty(id) %>
contentdiv.style.visibility = "visible";
$(showclick).removeClass("hideAll");
}
</script>

UserIDは、リスト内のすべての要素のIDです。問題は、クリックが他のどの要素をクリックしていても最初の要素にのみ影響することです。

回答：

htmlで id 1つの要素を指すのに使用される。
複数回使用すると、ブラウザはデフォルトの最初の要素になります。

クラスセレクタを使用する必要があります。何かのようなもの：

$(".contentdiv").click(function(){
$(this).next().removeClass("hideAll");
});

がここにあります 実施例。私はtoggleClassを使っていましたが、それは私にはもっと適しているようです。

IDは一意のIDです。同じIDを持つ同じページに複数のものを置くことはできません そして 物事が適切に働くことを期待する。識別子を一意にし、代わりにクラスセレクタを使用してclickイベントにバインドします。

あなたはidの代わりにclassを使うべきです、idは一意です、1ページにしか存在しません、classは複数のdivに存在することができます

あなたのためのいくつかのアイデア

html
<div class="showclick hideAll">

script
$(".showclick").on("click", function(){
$(this).toggle(); //toggle to show or hide, can be any element u want to toggle instead of this
});