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，这对我来说似乎更合适。

Answer 2

id是唯一标识符，您不能在同一页面上拥有两个或更多具有相同标识符和的东西，以使其正常工作。使您的标识符唯一，并使用类选择器绑定到click事件。

Answer 3

你应该使用class而不是id，id是唯一的，它只存在于1个页面中，class可以存在于multple 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
});

单击时的Div元素仅触发第一个元素

3 个答案: