0

我有一个列表视图，其中包含一些关于演出的信息。当您悬停一个项目时，将调用一个 JavaScript 函数（来自 hoveralls）以在页面上的单独 div 中显示详细信息。问题是它只适用于列表视图的第一项。我尝试将函数放在 de 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>
4

1 回答 1

1

您试图通过单个 ID 访问多个元素，但 ID 在文档中必须是唯一的。通过唯一标识感兴趣元素的类或其他一些 CSS 选择器来访问元素。

如果您在项目模板中使用硬编码的 ID，那么重用 ID 最终会导致 HTML 无效，并且只会返回一个元素，而不管文档中可能有$('#X')多少元素。id="X"

于 2013-07-22T11:54:14.627 回答