Question

这里我在c＃.net中创建了一个网站，我想要在点击fancybox中的gridview字段后打开的页面。但我面临一个问题，它只在第一行的fancybox中打开页面，我不知道为什么......？

这是我的代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="../fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="../fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="../fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="../fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="../fancybox/jquery.fancybox-1.3.4.css"
    media="screen" />
<script type="text/javascript" language="javascript">
    $(document).ready(function() {

            $('#deal_VCU').fancybox({
                'width': '85%',
                'height': '85%',
                'autoScale': false,
                'transitionIn': 'none',
                'transitionOut': 'none',
                'type': 'iframe',
                'titleShow': false
            });
        });
 </script>

<asp:GridView ID="GrdDeals" runat="server" AllowPaging="True" AllowSorting="True"
    AutoGenerateColumns="False" CellPadding="1" DataKeyNames="OFID" DataSourceID="SqlDataSource3"
    ForeColor="#333333" GridLines="None" PageSize="100" 
    onrowdatabound="GrdDeals_RowDataBound" onrowcommand="GrdDeals_RowCommand">
    <Columns>
        <asp:BoundField DataField="OFID" HeaderText="Offer ID" SortExpression="OFID" />
        <asp:BoundField DataField="Text_Message" HeaderText="Offer Text" SortExpression="Text_Message" />

        <asp:TemplateField HeaderText="Deal for VCU" SortExpression="Counter1">
            <ItemTemplate>
                <a id="deal_VCU" href="DetailView.aspx?ID=<%#Eval("OFID")%>&Op1=Counter2">
                    <%#Eval("Counter2")%></a>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Deal for SCSU" SortExpression="Counter2">
            <ItemTemplate>
                <a id="deal_SCSU" href="DetailView.aspx?ID=<%#Eval("OFID")%>&Op1=Counter2">
                    <%#Eval("Counter2")%></a>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Deal for Trinity" SortExpression="Counter3">
            <ItemTemplate>
                <a id="deal_Trinity" href="DetailView.aspx?ID=<%#Eval("OFID")%>&Op1=Counter3">
                    <%#Eval("Counter3")%></a>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <RowStyle BackColor="#EFF3FB" Height="4" />
    <EditRowStyle BackColor="#2461BF" />
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Right" />
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <AlternatingRowStyle BackColor="White" />
</asp:GridView>

在这里，我遇到一个问题，即fancybox仅在第一行打开。

Answer 1

这是因为有多个超链接控件存在相同的ID。请指定一个css类（比如deal_VCUCSS）

 <a id="deal_VCU" class="deal_VCUCSS" href="DetailView.aspx?ID=<%#Eval("OFID")%>&Op1=Counter2">
                                <%#Eval("Counter2")%></a>

并使用以下

 $('.deal_VCUCSS').fancybox({

Answer 2

为了让jQuery选择器工作，他们需要知道你指的是什么元素，并且因为你的代码有错误（基于W3C，一个ID应该只在html文件中使用一次以便DOM元素知道你想要访问的元素。

您需要拥有一个类，就像之前的注释一样，以便拥有事件监听器。或者，如果您希望每个链接具有不同的ID，则可以循环并将事件侦听器应用于所有这些ID $（“＃main_div_container”）。find（“a”）。each（function（）{your code here;}）; 我希望有所帮助。

关于gridview绑定问题的templete字段上的fancybox jquery

2 个答案: