Elementy div w pożarach kliknięć tylko dla pierwszego elementu - c #, javascript, jquery, asp.net

Wpisuję moje dane w ItemTemplate. Następnie w ItemTemplate mam dwa znaczniki div w następujący sposób:

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

Następnie mam css do zdefiniowania klasy hideAll tak, aby po załadowaniu strony dane w tym znaczniku div były ukrywane, dopóki użytkownik nie kliknie łącza contentdiv.

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

W końcu mam część javascript do wypalania zdarzenia click.

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

Identyfikator użytkownika jest identyfikatorem każdego elementu na liście. Problem polega na tym, że kliknięcie wpływa tylko na pierwszy element, niezależnie od tego, który inny element klikam na liście.

Odpowiedzi:

W html id jest używany w odniesieniu do jednego elementu.
Jeśli użyjesz go wiele razy, przeglądarka domyślnie ustawi się na pierwszy element.

Powinieneś użyć selektora klasy. Coś jak:

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

Tutaj jest przykład pracy. Kiedyś toggleClass, wydaje mi się bardziej odpowiednie dla mnie.

Identyfikator jest unikalnym identyfikatorem, nie można mieć dwóch lub więcej rzeczy na tej samej stronie z tym samym identyfikatorem i oczekiwać, że wszystko będzie działać prawidłowo. Ustaw unikatowe identyfikatory i połącz je ze zdarzeniem kliknięcia, używając zamiast tego selektora klasy.

powinieneś używać klasy zamiast id, id są unikalne, które istnieją tylko na 1 stronie, klasa może istnieć w multple div

jakiś pomysł dla ciebie

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