用javascript制作一个gridview图像onclick

Question

我有一个 gridview 并在其中有一个图像列。它可以正常工作，但我需要更多东西。我想让点击的图像更大，并使屏幕聚焦在它上面。实际上，当图像不在 gridview 中但就像我说我需要在 gridview 中的图像时，我现在所拥有的就是制作这个东西。这是我的css（我也想写我的css，因为它可以聚焦）：

#overlay {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background-color: #000;
        opacity: 0.7;
        filter: alpha(opacity = 70) !important;
        display: none;
        z-index: 100;
    }

    #overlayContent {
        position: fixed;
        width: 100%;
        top: 100px;
        text-align: center;
        display: none;
        overflow: hidden;
        z-index: 100;
    }

    #contentGallery {
        margin: 0px auto;
    }

    #imgBig, #imgSmall {
        cursor: pointer;
    }

我的网格视图：

<asp:GridView ID="GridViewEvents" CssClass="mGrid" AutoGenerateColumns="false" runat="server" DataSourceID="EntityDataSourceEvents">
    <Columns>
        <asp:TemplateField HeaderText="Araç">
            <ItemTemplate>
                <%#GetPlate(Convert.ToInt16(Eval("CarId"))) %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Sürücü">
            <ItemTemplate>
                <%#GetDriverId(Convert.ToInt16(Eval("DriverId"))) %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Alış KM">
            <ItemTemplate>
                <div id="overlayContent">
                    <img id="imgBig" src="" alt="" />
                </div>
                <div id="grid">
                    <img id="imgSmall" onclick="Tiklandi()" alt="" src='<%#Eval("FirstKmImage") %>' />
                </div>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="İade KM">
            <ItemTemplate>
                <asp:Image ID="ImageLast" ImageUrl='<%#Eval("LastKmImage") %>' runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Alış Tarih">
            <ItemTemplate>
                <%#Eval("FirstDate") %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="İade Tarih">
            <ItemTemplate>
                <%#Eval("LastDate") %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Güzergah">
            <ItemTemplate>
                <%#Eval("Guzergah") %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="İş Durumu">
            <ItemTemplate>
                <%#IsDurumu(Convert.ToBoolean(Eval("Done")))%>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

还有我的js代码：

function Tiklandi() {
        $("#imgBig").attr("src", $(this).prop('src'));
        $("#overlay").show('slow');
        $("#overlayContent").show('slow');
    }

如何让我的 js 代码在 gridview 中进行这种处理？

Answer 1

也许您可以在<img> 元素上添加类。

<asp:Image ID="ImageLast" ImageUrl='<%#Eval("LastKmImage") %>' runat="server" class="Tiklandi" />

并将点击事件处理程序绑定到类

$('.Tiklandi').click(function() {
        $("#imgBig").attr("src", $(this).prop('src'));
        $("#overlay").show('slow');
        $("#overlayContent").show('slow');
    })

希望这能有所帮助。