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> 

А вот JavaScript, который работает отлично на элементе флиртует ...

<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 это то, как вы будете в конечном итоге делает, если вы жестко идентификаторов шаблонов элементов приведет к недействительный HTML и $('#X') будет только когда-либо возвращает один элемент, независимо от того, сколько элементов id="X" может быть в документе ,