Question

我希望动态更改jQuery对话框中显示的图像。我试图传递'图像路径'作为参数，将用于更改jQuery对话框中显示的图像。请！检查下面的代码。默认情况下，它将在jQuery对话框中显示“images / firstImage.jpg”。现在，我试图通过jQuery Dialog参数将其更改为'images / secondImage.jpg'。

 <link href="jquery/jquery-ui.css" rel="stylesheet" />
    <script src="jquery/jquery-1.10.2.js"></script>
    <script src="jquery/jquery-ui.js"></script>
    <script>
        $(function () {
            // this initializes the dialog (and uses some common options that I do)
            $("#dialog").dialog(
                {
                    autoOpen: false,
                    modal: true,
                    show: "blind",
                    hide: "blind",
                    width: "50%",
                    height: "auto",
                    resizable: false,
                    position: 'center',
                    overflow: "hidden",
                });
        });

        function OpenGallary(photoSrc) {
            $("#dialog").dialog("open").data("param", photoSrc);
        }
    </script>

<body>
    <a onclick="OpenGallary('images/secondImage.jpg')">Click ME</a>
    <div id="dialog" title="Photo Gallary">
        <div id="aa" style="width: 800px;">
            hello this is my world.
        </div>
        <p>
            <img src="images/firstImage.jpg" />
        </p>
    </div>
</body>

Answer 1

你的函数OpenGallary（我认为你的意思是画廊，但我离题）只是在对话框div上设置数据属性，这不会影响图像标记。

OpenGallary函数可以更改为：

function OpenGallary(photoSrc) {
    // Change the src attribute directly on the img in the dialog:
    $("#dialog img").attr("src", photoSrc);
    // Now that the dialog html is updated, open the dialog:
    $("#dialog").dialog("open");
}

根据您要执行的操作，您可能希望直接在标记上选择带有ID的img - 上面使用的选择器仅用于处理现有的html。

我们如何从jQuery Dialog传递参数并更改html的内容？

1 个答案: