Question

在下面的代码中，我希望当转发器中的缩略图图像点击fullsize img并在leftDiv中加载图像标题时...我的数据库表格中有一行“paintingTitle”代表每个图像的标题... img加载正常，但我不知道如何添加标签到这个JavaScript代码... 我是javascript的新手...... 我希望我的标签在photoHolder div中的img之后......

        <div id="mainDiv">
            <div id="leftDiv">
                <div id="photoHolder">
                    <img src="Images/fullsize/E1.jpg" />
                </div>
            </div>
            <div id="rightDiv">
                <div id="sideWall">
                    <asp:SqlDataSource ID="paintingsSds" runat="server" 
                        ConnectionString="<%$ ConnectionStrings:EilyaCString %>" 
                        SelectCommand="SELECT * FROM [paintingsTbl]">
                    </asp:SqlDataSource>
                    <asp:Repeater ID="paintingsRpt" runat="server" DataSourceID="paintingsSds"> 
                        <ItemTemplate>
                            <img src='<%#DataBinder.Eval(Container.DataItem, "thumbnailUrl")%>' full='<%#DataBinder.Eval(Container.DataItem, "fullsizeUrl")%>'/>
                        </ItemTemplate>
                    </asp:Repeater>
                    <script src="js/jquery.min.js"></script>
                    <script language="JavaScript">
                        $('#sideWall img').click(function () {
                            $this = $(this);
                            $image = $this.attr('full');
                            $("#photoHolder").hide().html('<img src="' + $image + '" />').fadeIn(2000);
                        });
                    </script>
                </div>
            </div>
        </div>

Answer 1

您应该修改HTML并根据需要添加标签。

HTML 的

<div id="photoHolder">
    <img src="Images/fullsize/E1.jpg" />
    <label>Some text</label>
</div>

脚本

var _placeHolder = $("#photoHolder").hide();
_placeHolder.find('img').prop('src', $image); //To change image URL
_placeHolder.find('label').text('New Text');  //To change label text
_placeHolder.fadeIn(2000);

使用jQuery加载标签和img

1 个答案: