c# - 单击时的 Div 元素仅对第一个元素触发

Question

我在 ItemTemplate 中列出我的数据。然后在 ItemTemplate 内，我有两个 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。问题是，无论我单击列表中的哪个其他元素，单击都只会影响第一个元素。

Answer 1

在 html 中，id 用于引用一个元素。
如果多次使用它，浏览器将默认为第一个元素。

您应该使用类选择器。像这样的东西:

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

这是一个working example 。不过我使用了toggleClass，它似乎更适合我。