Question

我有一个关于演出的一些信息的列表视图。当您悬停项目时，将调用JavaScript函数（来自hoveralls）以在页面上的单独div中显示详细信息。问题是它只适用于listview的第一项。我尝试将该函数放在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，在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访问多个元素，但ID必须在文档中是唯一的。通过一个唯一标识感兴趣元素的类来访问元素，或者通过其他一些CSS选择器来访问元素。

如果您在项目模板中使用硬编码ID，则重复使用ID的方式将导致无效的HTML，$('#X')将只返回一个元素，无论{{1}有多少元素文件中可能有。

Javascript只适用于第一个listview项目

1 个答案: