0

我正在使用 Jquery UI 对话框为我的页面上的图像制作一个弹出窗口。

目前对于每个图像，我使用以下内容：

<script type="text/javascript">
        $("#myImageInfo").dialog({
            autoOpen: false,
            draggable: false,
            position: "center",
            width: "300px",
            modal: true,
            title: "Image Title",
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

        $("#MyImageLink")

          .click(function () {
              $("#MyImageInfo").dialog("open");
          });

    </script>

我的 HTML，

<a id="MyImageLink" href="#">
        <img src="blahblahblah.jpg"></a>


    <div id="MyImage" title="Basic modal dialog">
         <p><strong>Title Yah</strong></p>
        <p>
            <strong>Phone</strong>: ****<br />
            <strong>Email</strong>:<a href="mailto:"></a>
            </a>
    </div>

我的问题是我有大约 10 张图片设置相同，每张都有自己的唯一 ID 如何更有效地使用这个脚本，所以我只需要包含一次？谢谢。

4

2 回答 2

1

Id must be unique.But you can apply the same class name to more than one element.

You can give same class name to all those elements.and then use

$(".className").dialog({
            autoOpen: false,
            draggable: false,
            position: "center",
            width: "300px",
            modal: true,
            title: "Image Title",
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });
于 2013-09-27T12:24:52.197 回答
0

好的，您不能在同一页面上放置相同的 id 多个元素，id 必须是唯一的，或者后缀某些计数器值，MyImageLink1, MyImageLink2, MyImageLink3或者更好的选择是更改id为class这种方式：

<a class="MyImageLink" href="#"><img src="blahblahblah.jpg"></a>

<div class="MyImage" title="Basic modal dialog">
    .......
</div>

脚本：

<script type="text/javascript">
   function dialg(e){
        e.preventDefault();
        $(".myImageInfo").dialog({
            autoOpen: false,
            draggable: false,
            position: "center",
            width: "300px",
            modal: true,
            title: "Image Title",
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });
   }

    $(function(){
        $(".MyImageLink").on('click', dialg);
    });

    </script>
于 2013-09-27T12:44:14.800 回答