Javascript는 첫 번째 목록보기 항목에서만 작동합니다.

Question

나는 공연에 대한 정보가있는 목록보기를 가지고 있습니다. 항목을 가리키면 JavaScript 함수 (hoveralls에서)가 호출되어 페이지의 별도 div에 세부 정보가 표시됩니다. 문제는 목록보기의 첫 번째 항목에서만 작동한다는 것입니다. 나는 window.load와 document.ready에 함수를 넣으려고했으나 행운이 없었다.

이 기능이 목록의 모든 항목에서 작동하지 않는 이유는 무엇입니까?

<asp:ListView ID="lvAgenda" runat="server" GroupItemCount="4"> 
    <EmptyDataTemplate> 
     <table style=""> 
      <tr> 
       <td> 
        <p class="p2"> 
         <asp:Label ID="lblNoGigs" runat="server" Text="Sorry, maar er zijn geen optredens gepland :-(."></asp:Label> 
        </p> 
       </td> 
      </tr> 
     </table> 
    </EmptyDataTemplate> 
    <ItemTemplate> 
     <td> 

      <div id="divGigItem" class="gigitem img-bottom-shadow"> 
        <div id="gigItemTest"> 
        <div class="hiddengigitem"> 
         <asp:Label ID="lblGigId" runat="server" Visible="false" Text='<%# Eval("GigID") %>' CssClass="gigitemyear"></asp:Label></div> 
        <div class="gigitemyear"> 
         <asp:Label ID="lblGigMonth" runat="server" Text='<%# Eval("GigDate.Year") %>' CssClass="gigitemyear"></asp:Label></div> 
        <asp:Label ID="lblGigDay" runat="server" Text='<%# Eval("GigDate", "{0:dd/M}") %>' CssClass="gigitemdate"></asp:Label> 
        <div class="gigitemplace"> 
         <p class="hoveralls_text"> 
          <asp:Label ID="lblGigPlace" runat="server" Text='<%# Eval("GigCity") %>' CssClass="gigitemplace"></asp:Label></p> 
        </div> 
       </div> 
      </div> 
     </td> 
    </ItemTemplate> 
    <LayoutTemplate> 
     <table id="lvTable" runat="server" border="0" style=""> 
      <tr id="groupPlaceholder" runat="server"> 
      </tr> 
     </table> 
     <div class="wrapper aligncenter margin-top"> 
      <asp:DataPager ID="dpFutureGigs" PagedControlID="lvAgenda" PageSize="12" runat="server"> 
       <Fields> 
        <asp:NextPreviousPagerField ButtonType="Image" ShowPreviousPageButton="true" ShowLastPageButton="True" 
         ShowFirstPageButton="True" ButtonCssClass="img-max-width50" FirstPageImageUrl="images/Icons/firstpage.png" 
         LastPageImageUrl="images/Icons/lastPage.png" NextPageImageUrl="images/Icons/nextPage.png" PreviousPageImageUrl="images/Icons/previousPage.png" /> 
        <asp:NumericPagerField ButtonCount="2" /> 
       </Fields> 
      </asp:DataPager> 
     </div> 
    </LayoutTemplate> 
    <GroupTemplate> 
     <tr id="tableRow" runat="server"> 
      <td id="itemPlaceholder" runat="server"> 
      </td> 
     </tr> 
    </GroupTemplate> 
</asp:ListView> 

그리고 여기 당신은 하나의 ID로 여러 가지 요소에 액세스하려는하여 firts 요소에 잘 작동 자바 스크립트, ...

<script type="text/javascript"> 

    $(document).ready(function() { 
     $('#divGigItem').HoverAlls({ 
      speed_in: 500, 
      bg_width: '380px', 
      bg_height: '340px', 
      starts: '-380px,340px', 
      ends: '0px,0px', 
      returns: '-380px,340px', 
      target_container: "#gigDetailsTarget", 
      html_mode: "#gigDetails", 
      container_class: 'leftslidein', 
      bg_class: 'gigdetailbg' 
     }); 


    }); 

</script> 

Answer 1

이다, 그러나 ID는 내에서 고유해야합니다 문서. 관심있는 요소를 고유하게 식별하는 클래스 나 다른 CSS 선택기를 통해 요소에 액세스하십시오.

항목 템플릿에 하드 코드 된 ID가있는 경우 ID를 다시 사용하면 잘못된 HTML이 발생하고 은 문서에있을 수있는 id="X"의 요소 수에 관계없이 하나의 요소 만 반환합니다. .