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')の要素がいくつあっても、1 つの要素しか返さid="X"れません。

于 2013-07-22T11:54:14.627 に答える