Javascript only only on first listview item

我有一个列表视图与演出的一些信息。当您悬停一个项目时，会调用JavaScript函数（来自hoveralls）以在页面上的单独div中显示细节。问题是它只能在listview的第一个项目上工作。我试着把这个函数放在window.load和document.ready中，但没有运气。Javascript only only on first listview item

为什么此功能不适用于列表中的所有项目？

<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，这些作品的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>

来源

2013-07-22 Bongo

这是ASP.net，不是传统的 – John

你试图通过一个单一ID访问多个元素，但一个ID具有内是唯一的该文件。通过一个类来访问元素，该类可以唯一标识感兴趣的元素，或者通过其他一些CSS选择器。

如果您在项目模板中使用硬编码的ID，则重复使用ID将导致无效的HTML，而$('#X')将永远只返回一个元素，无论文档中可能有多少个id="X"元素。

来源

2013-07-22 11:54:14

我明白你说的是什么，但是有没有办法让所有物品都有这种行为，因为我无法预测它们会有多少物品，但行为应该始终是相同的... – Bongo

@Bongo：是的，有一种方法！通过ID访问元素，而不是通过某些类名访问它们，例如。 '$（'。gigitem'）。HoverAlls（...）'，如果'gigitem'对于你感兴趣的元素是唯一的。 –

Thx，简单而有效。 – Bongo

Javascript only only on first listview item

回答

相关问题