单击按钮时如何知道数据列表项的索引

Question

我在数据列表中有一张图片

        <asp:DataList ID="dlHotels" runat="server" >
                                <ItemTemplate>
        <img id="opener" class="btn12" alt="" src="images/view.jpg" />
       </ItemTemplate>
      </asp:DataList> 

当我点击图片时 jquery 被调用

$(function () {
        $("#dialog").dialog({
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });
        $("#opener").click(function () {

            $("#dialog").dialog("open");
        });
 });

现在在这个 jquery 中出现一个弹出窗口，它是 div 在数据列表之外

<div id="dialog" title="Choose Your Dates">
</div>

现在当 div 出现时我想要什么，它应该知道它是通过哪个图像调用的。

Answer 1

好的，你不能使用通用的 id opener，因为当后端渲染 html 代码时，id 名称是使用索引器计算的，因为多次没有相同的 ID 标识符。

对于这个用例，你可以试试这个：

<asp:DataList ID="dlHotels" runat="server" >
   <ItemTemplate>
      <img id="opener" class="btn12" alt="" src="images/view.jpg" onclick="openMe(this)" />
   </ItemTemplate>
</asp:DataList>

现在用这个修改你的javascript代码：

$(function () {
        $("#dialog").dialog({
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });
//        $("#opener").click(function () {
//
//            $("#dialog").dialog("open");
//        });
 });

function openMe (p_whoIs)
{
   //for debug use, comment the next line in procduction environment
   alert("You call me with : " + p_whoIs);

 var $img = $(p_whoIs).clone();
 $("#dialog").append($img);

   $("#dialog").dialog("open");
}